css3模糊视觉差动画

作者: 干炸里脊不如你 | 来源:发表于2019-06-19 10:35 被阅读0次

css3模糊视觉差动画
网页高级知识点（三）
07day
GeekBand - iOS 动画全面总结
08_dayCSS动画
CSS3 动画
CSS3 动画
css3动画
纯CSS3绘制的逼真，呆萌，超酷的CSS3动画
关于js动画和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>