前端开发CSS3模糊视觉差动画

java开发 h5前端设计
web前端开发和java开发
java软件开发web前端

有gif的既视感html 代码

<!DOCTYPE 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>
java web开发前端开发
java开发和前端开发的区别
java开发,web前端
» 本文来自:前端开发者 » 《前端开发CSS3模糊视觉差动画》
» 本文链接地址:https://www.rokub.com/8179.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!