黑客数字雨网页代码及特效展示

    时间: 浏览:151次  来源:站长在线
今天站长在线无意中在网络上面发现了一个黑客数字雨的网页特效,今日转载给网友欣赏!先上黑客数字雨的网页特效给大家看看吧!网址是:https://www.olzz.com/demo

今天站长在线无意中在网络上面发现了一个黑客数字雨的网页特效,今日转载给网友欣赏!

先上 黑客数字雨的网页特效给大家看看吧!网址是:

https://www.olzz.com/demo/hkszy.html

完整代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta HTTP-equiv="X-UA-Compatible" content="ie=edge">
    <title>黑客数字雨_站长在线网页特效演示</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .bind {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            margin-top: 150px;
            top: 50%;
            left: 50%;
            transition: all 1s ease 0s;
        }

        .icon {
            cursor: pointer;
            opacity: 0.9;
            animation: move 2s linear infinite;
        }

        @keyframes move {
            0% {
                transform: scale(0.5, 0.5);
            }

            100% {
                transform: scale(1, 1);
            }
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="bind" onclick="start()">
        <svg id="icon" t="1633583358049" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://WWW.w3.org/2000/svg" p-id="2404" width="200" height="200">
            <path
                d="M329.4 460.5c10-2.3 16.3-12.2 14.1-22.3-4.7-21.1-5.5-42.7-2.1-64.3 14.6-94.2 103.1-159.1 197.4-144.5 22.2 3.4 43.2 11 62.3 22.4 8.9 5.3 20.3 2.4 25.5-6.4 5.3-8.8 2.4-20.3-6.4-25.6-23.3-13.9-48.7-23.1-75.7-27.3-114.5-17.7-222.2 61-239.9 175.6-4 26.2-3.2 52.5 2.6 78.2 1.9 8.7 9.6 14.6 18.2 14.6 1.3 0.1 2.7-0.1 4-0.4z"
                fill="#1afa29" p-id="2405"></path>
            <path
                d="M847.9 599.4c0-26.6-10.5-50.1-28-66.4 17.6-40.7 27.5-85.5 27.5-132.7 0-184.8-150.3-335.1-335.1-335.1S177.2 215.5 177.2 400.3c0 110.7 54.1 208.8 137 269.9 0.6 3.3 1.3 6.6 2.3 9.9 3.2 10.8 7.5 20.4 13 28.8 30.1 45.8 64.1 97.7 97.9 148.3 34.2 51.2 83.8 83.1 147.2 94.7 8 1.4 15.3 2.4 22.3 3.3 3.4 0.5 6.8 0.9 10.2 1.4 2.7 0.4 5.3 0.6 8 0.6h37.8c3 0 6-0.2 8.9-0.7 3.3-0.5 6.7-1.1 10-1.6 5.7-0.9 11.5-1.8 17.2-2.8 80.2-13.8 140.7-74.1 154.3-153.7 2.8-15.9 4.2-32 4.3-47.7 0.2-59.7 0.2-67.2 0.2-91.4 0.1-12.3 0.1-29.1 0.1-59.9z m-614.8-199c0-154.2 125-279.2 279.3-279.2 154.2 0 279.2 125 279.2 279.2 0 39.1-8.2 76.3-22.7 110.1-2.6-0.2-5.2-0.4-7.9-0.4-8.1 0-16 1.1-23.5 3.2-8.7-8.2-19.1-14.7-30.8-18.7-1.9-0.6-3.9-1.2-5.8-1.7 9.2-18.6 15.9-38.8 19.2-60.4 7.2-46.4-1-92.7-23.7-133.7-5-9-16.3-12.3-25.3-7.3-9 5-12.3 16.3-7.3 25.3 18.7 33.8 25.4 71.8 19.5 110-3.7 24.1-12.4 46.2-24.7 65.5-1.1 0.3-2.3 0.4-3.3 0.7-7.7-7-16.9-12.8-27.4-17.3-8-4.2-17-6.5-26.2-6.5h-1.9v-65c0-45.4-30.1-80.6-75-87.7-4.2-0.7-8.4-1-12.5-1-43.9 0-82.4 35.3-85.9 78.6-0.4 5.6-0.4 10.2-0.4 14V550c-17.4-10-33.1-22.9-46.2-38.6-6.6-7.9-18.3-8.9-26.2-2.3-7.9 6.6-8.9 18.3-2.3 26.2 9.1 10.9 19.3 20.6 30.2 29.3-22.6 5.8-42.5 20.2-54.8 40.5-0.5 0.8-0.8 1.6-1.3 2.4-56.8-51.1-92.3-125-92.3-207.1z m558.8 350.2c0 12.8-1.3 25.9-3.5 38.6-9.6 56.2-52.1 98.3-108.5 108-8.9 1.5-17.8 2.8-26.8 4.3h-37.8c-10.1-1.5-20.4-2.6-30.5-4.4-46.5-8.5-84.3-31-110.8-70.7-32.8-49.2-65.3-98.5-97.7-147.9-2.7-4.2-4.7-9-6.1-13.8-6.1-20.9 6.2-42.4 26.8-46.4 3-0.6 5.9-0.9 8.6-0.9 12.5 0 23.1 5.6 31.3 16.2 13.6 17.6 26.4 35.7 39.6 53.6l4.2 5.7c0.3-0.2 0.7-0.3 1.1-0.4v-5-279.2c0-3.2 0-6.3 0.2-9.5 1.2-14.7 15.6-27.2 30.2-27.2 1.3 0 2.6 0.1 3.9 0.3 17.4 2.7 27.8 14.8 27.8 32.5 0 49.7 0 132.9 0.1 182.6 0 2.6 0.2 5.3 0.9 7.7 1.3 4 4.3 6.2 8.6 6.5h0.9c4.1 0 7.2-2.1 8.8-5.7 1-2.3 1.1-5.1 1.1-7.7v-22.5-6.6c0-11.2 3.8-21 13.3-27.6 3.5-2.4 7.7-3.9 11.6-5.8h12.6c0.5 0.3 0.8 0.7 1.3 0.9 16.3 5.6 23.9 16.2 23.9 33.4v22.2-16.4 22.2c0 1.6-0.1 3.2 0.1 4.7 0.7 5.4 4.8 8.9 10 8.9h1c5.5-0.5 8.7-4.2 9-11.1v-0.2-1.2-10.6c0.2-7.3 2-14.2 6.7-20.2 6.2-7.8 15.2-12.1 24.6-12.1 3.4 0 6.9 0.6 10.2 1.7 12.9 4.4 21.2 17 21.2 31.9v28c0 1.9 0 3.9 0.2 5.8 0.6 5.1 3.9 7.7 8.6 8.6 0.5 0.1 1 0.1 1.5 0.1 3.7 0 7.7-2.6 8.9-6.3 0.8-2.4 1-5.1 1-7.7V602v11.3s0.1-3.4 0.1-13.2c0-5.4 1-11.3 3.2-16.3 4.7-11.1 16-17.8 27.7-17.8 2.2 0 4.3 0.2 6.4 0.7 15.1 3.3 24.6 16.1 24.6 32.7 0 90.3 0.1 60.8-0.1 151.2z"
                fill="#1afa29" p-id="2406"></path>
        </svg>
    </div>
    <canvas id="canvas" ></canvas>
    <script>
        //获取画布对象
        var can = document.querySelector("canvas");
        //获取画布的上下文
        var ctx = can.getContext("2d");
        //设置canvas的宽度和高度
        can.width = window.innerWidth;
        can.height = window.innerHeight;
        console.log(can.width)
        //每个文字的字体大小
        var fontSize = 16;
        //计算列
        var colunms = Math.floor(window.innerWidth / fontSize);
        //记录每列文字的y轴坐标
        var arr = [];
        //给每一个文字初始化一个起始点的位置
        for (var i = 0; i < colunms; i++) {
            arr.push(0);
        }
        //运动的文字
        var str = "01";
        function start() {
            console.log('start')
            document.getElementById("canvas").style.display = "";//显示
            var elem = document.getElementById("canvas");
            requestFullScreen(elem); // 某个页面元素
        }
        var times;
        //全屏功能
        function requestFullScreen(element) {
            draw()
            // 流动速度
            times = setInterval(() => {
                draw()
            }, 30);
            // 判断各种浏览器,找到正确的方法
            var requestMethod = element.requestFullScreen || //W3C
                element.webkitRequestFullScreen || //FireFox
                element.mozRequestFullScreen || //Chrome等
                element.msRequestFullScreen; //IE11
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.Sendkeys("{F11}");
                }
            }
        }
        //退出全屏 判断浏览器种类
        function exitFull() {
            // 判断各种浏览器,找到正确的方法
            var exitMethod = document.exitFullscreen || //W3C
                document.mozCancelFullScreen || //FireFox
                document.webkitExitFullscreen || //Chrome等
                document.webkitExitFullscreen; //IE11
            if (exitMethod) {
                exitMethod.call(document);
            } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }

        }

        //监听退出全屏事件
        window.onresize = function () {
            if (checkFull()) {
                clearInterval(times);
                document.getElementById("canvas").style.display = "none";//显示
            }
        }
        function checkFull() {
            var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
            //to fix : false || undefined == undefined
            if (isFull === undefined) { isFull = false; }
            return isFull;
        }

        //绘画的函数
        function draw() {
            //布满全屏的黑色遮罩层
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
            //给字体设置样式
            ctx.font = "700 " + fontSize + "px  微软雅黑";
            //给字体添加颜色
            ctx.fillStyle = "#00cc33";
            //写入画布中
            for (var i = 0; i < colunms; i++) {
                var index = Math.floor(Math.random() * str.length);
                var x = i * fontSize;
                var y = arr[i] * fontSize;
                ctx.fillText(str[index], x, y);
                //如果文字的Y轴坐标大于画布的高度,1/100*colunms概率将该文字的Y轴坐标重置为0
                if (y >= can.height && Math.random() > 0.99) {
                    arr[i] = 0;
                }
                //文字Y轴坐标+1
                arr[i]++;
            }
        }
     </script>
</body>

</html>
本文地址:https://www.olzz.com/hkszy.html
码字不易,打个赏呗
站长在线小编感谢你的支持!
站长在线站长一对一技术培训,100元两个小时
阿里云虚拟主机1G空间,120元一年
香港、美国虚拟主机100元一年,1000元永久
腾讯云双十一0.4折起,2核8G5M三年仅700元,2核4G8M三年仅198元

猜你喜欢

黑客数字雨网页代码及特效展示

今天站长在线无意中在网络上面发现了一个黑客数字雨的网页特效,今日转载给网友欣赏!先上黑客数字雨的网页特效给大家看看吧!网址是:https://www.olzz.com/demo

2021-10-16  分类:网页特效  浏览:152次