029-89503350
全部网站建设自助建站网站空间网站优化网站推广SEO头条SEO问答优化百科微信开发微信营销
上一篇 下一篇

2019年西安网站开发特效代码:网页模糊

<网站建设>     编辑:西安网站制作公司    DATE:2019-04-02

       昨天是2019年4月1日:愚人节,西安网站开发公司-麦欧科技的技术部大神们弄了个愚人节网页特效代码,实现的网站开发效果就是一个新访客第一次进入网站浏览网页的时候,原网页加载完毕后,页面会渐渐变得模糊,并且访客不操作鼠标点击的话是不会有任何反应的。当访客点击网页任何一个地方时,网页会自动弹出一个层,层里面是放着一个愚人节的图片素材,通过标签按钮的提示,点击后页面恢复到清晰状态。是不是特别炫的效果呢。

2019年西安网站开发_特效代码_网页模糊

       以下就是网站开发特效代码,西安麦欧科技的网站开发团队分析给大家,祝大家2019年愚人节快乐!


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>愚人节快乐!</title>
    <script src="https://lib.baomitu.com/gsap/2.1.2/TweenMax.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style type="text/css">
        .disabled-events {
            user-select: none;
            pointer-events: none
        }
        .emitter-dot {
            background-color: rgba(129, 59, 245, .8);
            border-radius: 999px;
            position: absolute
        }
        .fool-blur {
            -webkit-animation: fool_blur ease-in 1.5s;
            animation: fool_blur ease-in 1.5s;
            animation-fill-mode: forwards
        }
        .fool-day {
            display: none;
            position: fixed;
            z-index: 9999999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0
        }
        .fool-day .pop-wrap {
            position: fixed;
            display: block;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }
        .fool-day .pop-wrap .content {
            display: block;
            width: 400px;
            height: 400px;
            animation-duration: 1s;
            animation-delay: 0s;
            background-repeat: no-repeat;
            background-size: 400px 400px;
            background-image: url("/study/%E8%BF%99%E9%87%8C%E5%A1%AB%E5%86%99%E4%BD%A0%E7%9A%84%E5%85%B3%E9%97%AD%E5%BC%B9%E5%B1%82%E7%9A%84%E5%9B%BE%E7%89%87.jpg");
            box-shadow: 0 2px 20px rgba(129, 59, 245, .5);
            border-radius: 12px;
            overflow: hidden
        }
        .fool-day .pop-wrap .content img {
            display: block;
            width: 400px;
            height: 400px
        }
        .fool-day .pop-wrap .content .action-wrap {
            padding: 340px 0 0 0;
            text-align: center;
            font-size: 0
        }
        .fool-day .pop-wrap .content .action-wrap .btn {
            display: inline-block;
            min-width: 132px;
            height: 32px;
            text-align: center;
            padding: 6px 24px;
            font-weight: 600;
            font-size: 14px;
            margin: 0 auto;
            cursor: pointer;
            box-sizing: border-box;
            vertical-align: middle;
            user-select: none
        }
        .fool-day .pop-wrap .content .action-wrap .btn + .btn {
            margin-left: 16px
        }
        .fool-day .pop-wrap .content .action-wrap .btn-basic {
            border: 1px solid rgba(255, 255, 255, 0.9);
            color: rgba(255, 255, 255, 0.9);
            border-radius: 16px
        }
        .fool-day .pop-wrap .content .action-wrap .btn-basic:hover {
            box-shadow: 0 0 5px #7034d2
        }
        .fool-day .pop-wrap .content .action-wrap .btn-primary {
            background-image: linear-gradient(-180deg, #fdb414 0, #fd930b 99%);
            color: #fff;
            box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.20);
            border-radius: 16px
        }
        .fool-day .pop-wrap .content .action-wrap .btn-primary:hover {
            background-image: linear-gradient(-180deg, #f5ae14 0, #f58f0b 99%)
        }
        @-webkit-keyframes fool_blur {
            0% {
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -o-filter: blur(0px);
                -ms-filter: blur(0px);
                filter: blur(0px)
            }
            100% {
                -webkit-filter: blur(5px);
                -moz-filter: blur(5px);
                -o-filter: blur(5px);
                -ms-filter: blur(5px);
                filter: blur(5px)
            }
        }
        @keyframes fool_blur {
            0% {
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -o-filter: blur(0px);
                -ms-filter: blur(0px);
                filter: blur(0px)
            }
            100% {
                -webkit-filter: blur(5px);
                -moz-filter: blur(5px);
                -o-filter: blur(5px);
                -ms-filter: blur(5px);
                filter: blur(5px)
            }
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 100%">
    <div>这是一个测试用的愚人节页面模糊效果!</div>
    <div>
        <div>
            <div id="emitter">
                <div>
                    <span class="btn btn-basic btn-close">给我好好显示网页!</span>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var fooldayCookieName = "foolday_randomStr";
    $(document).ready(function () {
        if (document.cookie.indexOf(fooldayCookieName + "=") == -1) {
            $(".pusher").addClass("disabled-events");
            setTimeout(function () {
                $.fooldayExplode = new FooldayExplode(document.querySelector(".fool-day"));
                $(".pusher").addClass("fool-blur");
                setTimeout(function () {
                    $(document).on("mousedown touchstart", clickShowFoolDayModal)
                }, 1500)
            }, 1000)
        }
    });
    function removeFoolDayEffect() {
        $(".pusher").removeClass("disabled-events");
        $.fooldayExplode.start();
        $(".fool-day").fadeOut();
        $(".pusher").removeClass("fool-blur")
    }
    var showFoolDayModal = function () {
        $("body").append($(".fool-day"));
        var b = $(".fool-day");
        var a = b.find(".pop-wrap .content");
        b.show();
        a.addClass("zoomInDown animated");
        $(".fool-day .btn-close").on("mousedown touchstart", clickRemoveFoolDay);
        $(".fool-day .btn-hide").on("mousedown touchstart", clickHideFoolDay)
        /*a.on("animationend", function () {
        })*/
    };
    var clickShowFoolDayModal = function () {
        showFoolDayModal();
        $(document).off("mousedown touchstart", clickShowFoolDayModal)
    };
    var clickRemoveFoolDay = function () {
        document.cookie = fooldayCookieName + "=1";
        removeFoolDayEffect();
        $(".fool-day .btn-close").off("mousedown touchstart", clickRemoveFoolDay)
    };
    var clickHideFoolDay = function () {
        removeFoolDayEffect();
        $(".fool-day .btn-hide").off("mousedown touchstart", clickHideFoolDay)
    };
    function FooldayExplode(a) {
        var c = document.createElement("div"), e = 100, g = 50, f = 100, b = 10;
        c.setAttribute("id", "emit-wrap");
        c.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;";
        document.body.appendChild(c);
        function d(j) {
            var l = new TimelineLite({
                onComplete: function () {
                    $("#emit-wrap").remove()
                }
            }), p, o, k, n, m;
            for (n = 0; n < g; n++) {
                k = document.createElement("div");
                k.className = "emitter-dot";
                m = i(b, f);
                j.appendChild(k);
                p = Math.random() * Math.PI * 2;
                o = Math.random() * (e / 2 - m / 2);
                TweenLite.set(k, {
                    x: Math.cos(p) * o,
                    y: Math.sin(p) * o,
                    width: m,
                    height: m,
                    xPercent: -50,
                    yPercent: -50,
                    force3D: true
                });
                l.to(k, 1 + Math.random(), {opacity: 0, x: Math.cos(p) * o * 24, y: Math.sin(p) * o * 24}, 0);
                l.duration(1.5)
            }
            return l
        }
        function h(k) {
            var n = d(c);
            var m = $(k).offset();
            var l = $(k).width();
            var j = $(k).height();
            TweenLite.set(c, {x: m.left + l / 2, y: m.top + j / 2});
            n.restart()
        }
        function i(k, j) {
            return k + Math.random() * (j - k)
        }
        FooldayExplode.prototype.start = function () {
            h(a)
        }
    };
</script>
</body>
</html>


       本文由麦欧科技的西安网站开发团队网络整编而成,转载请注明出处。如需了解更多开发网站的文章、新闻、资讯和开发网站技巧、案例、各种开发网站知识百科请进入:http://www./nlist/nc5498717_list.html,而且能够与麦欧科技专业客服进行一对一解答。

相关热点资讯
  麦欧官网所有资料仅供参考 · 不作为签约和履约的承诺  法律顾问 · 陕西臻理律师事务所