美文网首页
css3模糊视觉差动画

css3模糊视觉差动画

作者: 干炸里脊不如你 | 来源:发表于2019-06-19 10:35 被阅读0次
    <!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>
    

    相关文章

      网友评论

          本文标题:css3模糊视觉差动画

          本文链接:https://www.haomeiwen.com/subject/cgdhqctx.html