css3模糊视觉差动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://olpnhrh8v.qnssl.com/0623pc/js/jquery-1.8.3.min.js"></script>

<script>
function eventAnim() {
	$('.elm_4_1,.elm_4_2,.elm_4_3').css('opacity','0');
	$('.elm_4_1').animate({opacity: 0.3}, 150);
	$('.elm_4_1').animate({opacity: 0}, 0);

	$('.elm_4_2').delay(100).animate({opacity: 0.3}, 150);
	$('.elm_4_2').animate({opacity: 0}, 0);

	$('.elm_4_3').delay(200).animate({opacity: 0.3}, 150);
	$('.elm_4_3').animate({opacity: 0}, 0);
	
	$('.elm_4_4').delay(300).animate({opacity: 0.3}, 150);
	$('.elm_4_4').animate({opacity: 0}, 0);
}

var _time = setInterval(function(){
	eventAnim();	
},2500)

</script>
<style>
*{margin:0;padding:0;}
.ad{ max-width:1920px;
     height:1044px;
	 position: relative;
	 background:url(https://olpnhrh8v.qnssl.com/0623pc/images/bg.png) no-repeat;}
.ad img{ display:block;
         width:926px;
		 height:228px;
		 position:absolute;
		 top:190px;
		 left:0;
		 right:0;
		 margin:auto;}
.dim{display:block;
         width:926px;
		 height:228px;
		 position:absolute;
		 top:190px;
		 left:0;
		 right:0;
		 margin:auto;}
.elm_4_1,.elm_4_2,.elm_4_3,.elm_4_4{position:absolute; filter:alpha(opacity=0); opacity:0;}
.elm_4_1{top:6px;left:6px;-webkit-filter:blur(1px);-moz-filter:blur(1px);-ms-filter:blur(1px);filter:blur(1px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);}
.elm_4_2{ top:-6px; left:6px;webkit-filter:blur(2px);-moz-filter:blur(2px);-ms-filter:blur(2px);filter:blur(2px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false);}
.elm_4_3{ top:6px; left:-6px;webkit-filter:blur(3px);-moz-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=false);}
.elm_4_4{ top:-6px; left:-6px;webkit-filter:blur(4px);-moz-filter:blur(4px);-ms-filter:blur(4px);filter:blur(4px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);}

</style>
</head>

<body>
<div class="ad">
  <img src="https://olpnhrh8v.qnssl.com/0623pc/images/text.png" >
</div>
<div class="dim">
<div class="elm_4_1">
  <img src="https://olpnhrh8v.qnssl.com/0623pc/images/text.png" >

</div>
<div class="elm_4_2">
  <img src="https://olpnhrh8v.qnssl.com/0623pc/images/text.png" >

</div>
<div class="elm_4_3">
  <img src="https://olpnhrh8v.qnssl.com/0623pc/images/text.png" >

</div>
<div class="elm_4_4">
  <img src="https://olpnhrh8v.qnssl.com/0623pc/images/text.png" >

</div>
</div></body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css3模糊视觉差动画

赞 (1)
分享到:更多 ()

发表评论 0