企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站开发

Website development

19年愚人节网页模糊特效代码

发布时间:2019-04-02 09:24:24   作者:曹责   来源:云智互联

TAGS:H5网页开发

昨天是愚人节,技术部的大神弄了个愚人节网页特效代码,大概的效果的是一个新的用户第一次进入网站浏览,原网页加载完毕后,页面会渐渐变得模糊而且用户不点击的情况下不会有反应,如果用户点击网页任何一个地方,网页会自动弹出一个层,层里面是放着一个愚人节的图片素材,通过A标签提示,擦亮眼睛页面回复到清晰状态,效果如下ZWg北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZWg北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZWg北京网站设计开发,小程序开发,公众号,微信开发-云智互联

以下是网页开发代码:ZWg北京网站设计开发,小程序开发,公众号,微信开发-云智互联

<!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("这里填写你的关闭弹层的图片.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>


ZWg北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7522,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号