网站网址跳转单页面html源码

偶尔发现的,记录下来

跳转页面
跳转页面

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <title>新网站跳转页面 - Healer的工具箱 - QQ前线乐园</title>
    <style>
        body {
            width: 100%;
            height: 100vh
        }

        .main {
            position: relative;
            width: 100%;
            height: 100%;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .circle {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background-image: linear-gradient(0deg,#2f66ff,#9940ff 30%,#ee37ff 60%,#ff004c 100%);
            border-radius: 50%;
            animation: rotate 1s linear infinite
        }

            .circle::before {
                content: "";
                position: absolute;
                width: 200px;
                height: 200px;
                background-image: linear-gradient(0deg,#2f66ff,#9940ff 30%,#ee37ff 60%,#ff004c 100%);
                border-radius: 50%;
                filter: blur(35px)
            }

            .circle::after {
                content: "";
                position: absolute;
                width: 150px;
                height: 150px;
                background: #000;
                border-radius: 50%
            }

        h1 {
            position: absolute;
            color: #fff;
            font-weight: 700
        }

        .title {
            color: #fff;
            position: absolute;
            top: 10%;
            text-shadow: 0 0 30px #fff;
            text-align: center;
            font-size: 2rem;
            font-weight: 700
        }

        .text {
            color: #fff;
            position: absolute;
            bottom: 10%;
            text-shadow: 0 0 30px #fff;
            font-weight: 700;
            text-align: center
        }

        @keyframes rotate {
            0% {
                transform: rotate(0)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        @media screen and (max-device-width: 800px) {
        }
    </style>
    <script type="text/javascript">
        function time() {
            var sec = document.getElementById("second");
            var i = 10;//设置定时时间
            setInterval(function () {
                i--;
                sec.innerHTML = i + "s";
                if (i == 1) {
                    window.location.href = "https://www.jxip.net/2021/4525.html";
                }
            }, 1000);
        }
    </script>
</head>
<body onload="time()">
    <div class="main">
        <div class="circle"></div>
        <h1 id="second">10s</h1>
        <p class="title">即将跳转到新网站...</p>
        <p class="text">由于原网站服务器即将到期,已经迁移到新网站。希望大家多多支持,请收藏新网站,谢谢!</p>
    </div>
</body>
</html>  

可以结合下面的文章做页面跳转

wordpress go跳转实现办法

给TA买糖
共{{data.count}}人
人已赞赏
其它教程

快捷指令:工作日打卡

2021-11-14 23:37:18

其它教程

iOS15快捷指令安全和隐私设置推荐

2021-12-2 22:29:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索