Season Blog

HTML+JS+CSS 实现随机跳转到一个网址

2024-05-14 · 5 min read
<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>即将奔赴</title>
    <link rel="shortcut icon" href="链接">

    <style type="text/css">

        * {
            color: #111827;
        }

        a {
            text-decoration: none;
        }

        .blink {
            position: fixed;
            height: 100%;
            width: 100%;
            text-align: center;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            animation: blink 3s linear infinite;
            -webkit-animation: blink 3s linear infinite;
            -moz-animation: blink 3s linear infinite;
            -ms-animation: blink 3s linear infinite;
            -o-animation: blink 3s linear infinite;
        }
        .all_bg{
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                min-width: 780px;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background: url(链接);
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-position: center 0;
            }

        @keyframes blink {
            0% {
                opacity: 0;
                transform: scale(1);
            }

            20% {
                opacity: 0;
                transform: scale(1);
            }

            40% {
                opacity: 0.3;
                transform: scale(1);
            }

            80% {
                opacity: 1;
                transform: scale(0.98);
            }

            90% {
                opacity: 1;
                transform: scale(0.98);
            }

            100% {
                opacity: 0.2;
                transform: scale(1.2);
            }
        }

        @-webkit-keyframes blink {
            0% {
                opacity: 0;
                transform: scale(1);
            }

            20% {
                opacity: 0;
                transform: scale(1);
            }

            40% {
                opacity: 0.3;
                transform: scale(1);
            }

            80% {
                opacity: 1;
                transform: scale(0.98);
            }

            90% {
                opacity: 1;
                transform: scale(0.98);
            }

            100% {
                opacity: 0.2;
                transform: scale(1.2);
            }
        }

        @-moz-keyframes blink {
            0% {
                opacity: 0;
                transform: scale(1);
            }

            20% {
                opacity: 0;
                transform: scale(1);
            }

            40% {
                opacity: 0.3;
                transform: scale(1);
            }

            80% {
                opacity: 1;
                transform: scale(0.98);
            }

            90% {
                opacity: 1;
                transform: scale(0.98);
            }

            100% {
                opacity: 0.2;
                transform: scale(1.2);
            }
        }

        @-ms-keyframes blink {
            0% {
                opacity: 0;
                transform: scale(1);
            }

            20% {
                opacity: 0;
                transform: scale(1);
            }

            40% {
                opacity: 0.3;
                transform: scale(1);
            }

            80% {
                opacity: 1;
                transform: scale(0.98);
            }

            90% {
                opacity: 1;
                transform: scale(0.98);
            }

            100% {
                opacity: 0.2;
                transform: scale(1.2);
            }
        }

        @-o-keyframes blink {
            0% {
                opacity: 0;
                transform: scale(1);
            }

            20% {
                opacity: 0;
                transform: scale(1);
            }

            40% {
                opacity: 0.3;
                transform: scale(1);
            }

            80% {
                opacity: 1;
                transform: scale(0.98);
            }

            90% {
                opacity: 1;
                transform: scale(0.98);
            }

            100% {
                opacity: 0.2;
                transform: scale(1.2);
            }
        }

        .botCenter {
            position: fixed;
            width: 100%;
            height: 50px;
            bottom: 2px;
            line-height: 20px;
            font-size: 12px;
            text-align: center;
            animation: botCenter 3s linear;
            -webkit-animation: botCenter 3s linear;
            -moz-animation: botCenter 3s linear;
            -ms-animation: botCenter 3s linear;
            -o-animation: botCenter 3s linear;
        }

        @keyframes botCenter {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 0;
            }

            40% {
                opacity: 0.3;
            }

            80% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        @-webkit-keyframes botCenter {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 0;
            }

            40% {
                opacity: 0.3;
            }

            80% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        @-moz-keyframes botCenter {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 0;
            }

            40% {
                opacity: 0.3;
            }

            80% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        @-ms-keyframes botCenter {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 0;
            }

            40% {
                opacity: 0.3;
            }

            80% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

        @-o-keyframes botCenter {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 0;
            }

            40% {
                opacity: 0.3;
            }

            80% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }
    </style>

</head>

<body>


    <div class="blink">
        <a href="链接" target="_blank"
            title="点击加入“奔赴”,分享网站流量 :-)">欢迎回来,即将奔赴<br />Welcome back, coming soon...</a>
    </div>
    <script>
    function jumpUrl(){
        var arr = new Array(
            "随机链接1",
            "随机链接2",
            "随机链接3",
            "随机链接4",
            "随机链接5",
        );
     window.location.href = arr[Math.floor(Math.random() * arr.length)];
    }
    
    setTimeout(function () {
    jumpUrl();},5000);//设定跳转时间,1s=1000
    </script>
<div class="all_bg"></div>
</body>

</html>