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

0330

代码如下

<!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://www.baige.icu/2021/11/18/831059a162611.jpeg">

    <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://amorous.vip/" target="_blank"
            title="点击加入“奔赴”，分享网站流量 :-)">欢迎回来，即将奔赴<br />Welcome back, coming soon...</a>
    </div>
    <script>
    function jumpUrl(){
        var arr = new Array(
            "目标地址1",
            "目标地址2",
        );
     window.location.href = arr[Math.floor(Math.random() * arr.length)];
    }
    
    setTimeout(function () {
    jumpUrl();},5000);//设定跳转时间，1s=1000
    </script>
<div class="all_bg"></div>
</body>

</html>
© 版权声明
文章作者
风情云小屋
隐私政策
privacy-agreement
用户协议
use-agreement
侵权投诉
投诉
THE END
技术教程网络基地
# html
喜欢就支持一下吧
点赞0 分享
风情的头像-风情博客
Mindows工具箱给你的Android设备刷上Windows-风情博客
Mindows工具箱给你的Android设备刷上Windows
Mindows工具箱给你的Android设备刷上Windows
2年前 7650
【系统升级】RX5MAX 升级维纳斯1.0系统教程（已更新）-风情博客
【系统升级】RX5MAX 升级维纳斯1.0系统教程（已更新）
【系统升级】RX5MAX 升级维纳斯1.0系统教程（已更新）
2年前 2631
手机端解压后缀名tgz格式线刷—mt文件管理二次解压法-风情博客
手机端解压后缀名tgz格式线刷—mt文件管理二次解压法
手机端解压后缀名tgz格式线刷—mt文件管理二次解压法
2年前 747
韩博士装机大师[电脑软件]-风情博客
韩博士装机大师[电脑软件]
韩博士装机大师[电脑软件]
2年前 611
微软常用运行库合集[电脑软件]-风情博客
微软常用运行库合集[电脑软件]
微软常用运行库合集[电脑软件]
2年前 600
D盾网站后门查杀Web查杀-webshell查杀[电脑软件]-风情博客
D盾网站后门查杀Web查杀-webshell查杀[电脑软件]
D盾网站后门查杀Web查杀-webshell查杀[电脑软件]
2年前 533
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像

1『知识』手机操作系统差异

风情的头像-风情博客2年前
119

2通过PHP对文本进行加密—PHP加密

风情的头像-风情博客2年前
163

3某团接口图床（直连绿标）-原烟雨图床作者开发

风情的头像-风情博客2年前
免费148

4安卓看刊宝v1.2.2免费无广告

风情的头像-风情博客2年前
免费25

5非常好看的WordPress后台主题Q-admin分享

风情的头像-风情博客2年前
免费362

6使用Docker自建一个简洁美观的网站统计（分析）Umami

风情的头像-风情博客2年前
83