0 0 0

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

酋长
23-11-17 2869

灵感来源于开往-友链接力

<!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="/ico.png">

    <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(https://www.baige.icu/2021/11/24/ea10908f9dba0.jpg);
                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="https://xiu.no/" target="_blank"
            title="点击加入“奔赴”,分享网站流量 :-)">欢迎回来,即将奔赴<br />Welcome back, coming soon...</a>
    </div>
    <script>
    function jumpUrl(){
        var arr = new Array(
            "https://a.xiu.no",
            "https://xiu.no",
            "https://b.xiu.no",
            "https://c.xiu.no",
            "https://d.xiu.no",
        );
     window.location.href = arr[Math.floor(Math.random() * arr.length)];
    }
    
    setTimeout(function () {
    jumpUrl();},5000);//设定跳转时间,1s=1000
    </script>
<div class="all_bg"></div>
</body>

</html>
展开全文
『Ta』们也感兴趣 (3)
  • 546160
  • 小助理
  • 384953874

请先登录后发表评论!

最新回复 (0)

    暂无评论

返回
请先登录后发表评论!