前言

新建一个HTML文件可实现随机跳转到另一个网址
具体效果请看:https://www.5k5b.com/link/

如何搭建:

新建一个html文件,放入以下代码,页面图片以及跳转网址请自己修改

<!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="https://img01.sogoucdn.com/app/a/200692/400_400_feedback_2eb29d2054ce4cc3b603f17f62dcc66d.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://img01.sogoucdn.com/app/a/200692/4000_2336_feedback_ce9e4cadca38429282c57a50bc1ad3b6.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://sccens.net/" target="_blank"
            title="点击加入“奔赴”,分享网站流量 :-)">欢迎回来,即将奔赴<br />Welcome back, coming soon...</a>
    </div>
    <script>
    function jumpUrl(){
        var arr = new Array(
            "https://www.5k5b.com/",
            "https://自己添加/",
            "https://自己添加/",
            "https://自己添加/",
            "https://自己添加/",
        );
     window.location.href = arr[Math.floor(Math.random() * arr.length)];
    }
    
    setTimeout(function () {
    jumpUrl();},5000);//设定跳转时间,1s=1000
    </script>
<div class="all_bg"></div>
</body>

</html>

至此,完毕!

标签:opacityscaletransformbotcenterblink
本文END结束

文章标题:HTML+JS+CSS实现随机跳转到一个网址

本文链接:https://5k5b.com/archives/18.html

除非另有说明,本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

版权说明:若无注明,本文皆 TuJun's Blog原创,转载请保留文章出处。


最后修改:2022 年 09 月 07 日
如果觉得我的文章对你有用,请随意赞赏