前端ABC<!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模糊视觉差动画