• 一款好看的跳转单页


    <!doctype html>
    <html>
    <head><meta http-equiv="refresh" content="17; URL=http://melodyjerry.top/">
    <meta charset="utf-8">
    <title>跳转页面</title>
    
    
    <style>
    
    * {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        box-sizing: border-box;
        color: inherit;
    }
    
    body {
        background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
        height: 100vh;
    }
    
    h1 {
        font-size: 45vw;
        text-align: center;
        position: fixed;
         100vw;
        z-index: 1;
        color: #ffffff26;
        text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        font-family: "Montserrat", monospace;
    }
    
    div {
        background: rgba(0, 0, 0, 0);
         70vw;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        margin: 0 auto;
        padding: 30px 30px 10px;
        box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
        z-index: 3;
    }
    
    P {
        font-family: "Share Tech Mono", monospace;
        color: #f5f5f5;
        margin: 0 0 20px;
        font-size: 17px;
        line-height: 1.2;
    }
    
    span {
        color: #f0c674;
    }
    
    i {
        color: #8abeb7;
    }
    
    div a {
        text-decoration: none;
    }
    
    b {
        color: #81a2be;
    }
    
    a.avatar {
        position: fixed;
        bottom: 15px;
        right: -100px;
        -webkit-animation: slide 0.5s 4.5s forwards;
                animation: slide 0.5s 4.5s forwards;
        display: block;
        z-index: 4
    }
    
    a.avatar img {
        border-radius: 100%;
         44px;
        border: 2px solid white;
    }
    
    @-webkit-keyframes slide {
        from {
            right: -100px;
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
            opacity: 0;
        }
        to {
            right: 15px;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
            opacity: 1;
        }
    }
    
    @keyframes slide {
        from {
            right: -100px;
            -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
            opacity: 0;
        }
        to {
            right: 15px;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
            opacity: 1;
        }
    }
    </style>
    </head>
    <body>
    <h1></h1>
    <div><p>> <span>[root@VM-0-9-centos ~]# </span>: "<i>准备连接MelodyJerry博客</i>"</p>
    <p>> <span>[root@VM-0-9-centos ~]# </span>: "<i>正在连接</i>"</p>
    <p>> <span>[root@VM-0-9-centos ~]# </span>: <b>服务器正在启动</span>
        : <a href="http://melodyjerry.top/">启动成功</a>, <a href="http://melodyjerry.top/">MelodyJerry博客</a><a href="http://melodyjerry.top/">连接</a><a href="http://melodyjerry.top/">成功</a></p>
    <p>> 
            <span>[root@VM-0-9-centos ~]# : </span>"<i>MelodyJerry博客正在加载...</i>"</p>
    <p>> 
                <span>[root@VM-0-9-centos ~]# : </span>"<i>加载成功 正在打开...</i>"</p>
    </div>
    
    
    <script>
    var str = document.getElementsByTagName('div')[0].innerHTML.toString();
    var i = 0;
    document.getElementsByTagName('div')[0].innerHTML = "";
    
    setTimeout(function() {
        var se = setInterval(function() {
            i++;
            document.getElementsByTagName('div')[0].innerHTML = str.slice(0, i) + "|";
            if (i == str.length) {
                clearInterval(se);
                document.getElementsByTagName('div')[0].innerHTML = str;
            }
        }, 30);
    },0);
    </script>
    
    </body>
    </html>
    
    一个正在学习全栈的 ⭐ 精神小伙 ⭐ MelodyJerry
  • 相关阅读:
    OpenGL开发环境简介
    EditPlus详解
    cocos2d-x游戏引擎核心之十二——3.x新特性
    创龙OMAPL138的NMI中断
    创龙OMAPL138的SPI FLASH读写
    itop4412学习-超级块操作
    创龙6748开发板加载.out出现a data verification error occurred, file load failed
    创龙OMAPL138开发板测试(1)
    DSP5509的USB协议开发
    Flask:模板
  • 原文地址:https://www.cnblogs.com/melodyjerry/p/15477690.html
Copyright © 2020-2023  润新知