码迷，mamicode.com
首页 > 其他好文 > 详细

炫酷的404页面

时间：2021-03-17 14:25:03      阅读：0      评论：0      收藏：0      [点我收藏+]

标签：hidden   bsp   wal   port   viewport   add   center   for   ima   

动画效果

技术图片

 

代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>404</title>
</head>
<style>
    .message {
        position: absolute;
        top: 20%;
        right: 5%;
        color: #fafafa;
        font-size: 30px;
        animation: textRotate 0.8s linear 0.5s infinite alternate;
    }

    body {
        padding: 0px;
        margin: 0px;
        border: 0px;
        width: 100%;
        height: 100%;
    }

    @keyframes textRotate {
        from {
            transform-origin: top;
            transform: rotateX(-30deg);
        }
        to {
            transform-origin: top;
            transform: rotateX(12deg);
        }
    }

    .NotPage {
        position: relative;
        z-index: -10;
        background: #000;
        height: 100vh;
        overflow: hidden;
        display: flex;
        font-family: "Anton", sans-serif;
        justify-content: center;
        align-items: center;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }

    div {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .rail {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-transform: rotateX(-30deg) rotateY(-30deg);
        transform: rotateX(-30deg) rotateY(-30deg);
    }

    .rail .stamp {
        position: absolute;
        width: 200px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #141414;
        color: #fff;
        font-size: 7rem;
    }

    .rail .stamp:nth-child(1) {
        -webkit-animation: stampSlide 40000ms -2300ms linear infinite;
        animation: stampSlide 40000ms -2300ms linear infinite;
    }

    .rail .stamp:nth-child(2) {
        -webkit-animation: stampSlide 40000ms -4300ms linear infinite;
        animation: stampSlide 40000ms -4300ms linear infinite;
    }

    .rail .stamp:nth-child(3) {
        -webkit-animation: stampSlide 40000ms -6300ms linear infinite;
        animation: stampSlide 40000ms -6300ms linear infinite;
    }

    .rail .stamp:nth-child(4) {
        -webkit-animation: stampSlide 40000ms -8300ms linear infinite;
        animation: stampSlide 40000ms -8300ms linear infinite;
    }

    .rail .stamp:nth-child(5) {
        -webkit-animation: stampSlide 40000ms -10300ms linear infinite;
        animation: stampSlide 40000ms -10300ms linear infinite;
    }

    .rail .stamp:nth-child(6) {
        -webkit-animation: stampSlide 40000ms -12300ms linear infinite;
        animation: stampSlide 40000ms -12300ms linear infinite;
    }

    .rail .stamp:nth-child(7) {
        -webkit-animation: stampSlide 40000ms -14300ms linear infinite;
        animation: stampSlide 40000ms -14300ms linear infinite;
    }

    .rail .stamp:nth-child(8) {
        -webkit-animation: stampSlide 40000ms -16300ms linear infinite;
        animation: stampSlide 40000ms -16300ms linear infinite;
    }

    .rail .stamp:nth-child(9) {
        -webkit-animation: stampSlide 40000ms -18300ms linear infinite;
        animation: stampSlide 40000ms -18300ms linear infinite;
    }

    .rail .stamp:nth-child(10) {
        -webkit-animation: stampSlide 40000ms -20300ms linear infinite;
        animation: stampSlide 40000ms -20300ms linear infinite;
    }

    .rail .stamp:nth-child(11) {
        -webkit-animation: stampSlide 40000ms -22300ms linear infinite;
        animation: stampSlide 40000ms -22300ms linear infinite;
    }

    .rail .stamp:nth-child(12) {
        -webkit-animation: stampSlide 40000ms -24300ms linear infinite;
        animation: stampSlide 40000ms -24300ms linear infinite;
    }

    .rail .stamp:nth-child(13) {
        -webkit-animation: stampSlide 40000ms -26300ms linear infinite;
        animation: stampSlide 40000ms -26300ms linear infinite;
    }

    .rail .stamp:nth-child(14) {
        -webkit-animation: stampSlide 40000ms -28300ms linear infinite;
        animation: stampSlide 40000ms -28300ms linear infinite;
    }

    .rail .stamp:nth-child(15) {
        -webkit-animation: stampSlide 40000ms -30300ms linear infinite;
        animation: stampSlide 40000ms -30300ms linear infinite;
    }

    .rail .stamp:nth-child(16) {
        -webkit-animation: stampSlide 40000ms -32300ms linear infinite;
        animation: stampSlide 40000ms -32300ms linear infinite;
    }

    .rail .stamp:nth-child(17) {
        -webkit-animation: stampSlide 40000ms -34300ms linear infinite;
        animation: stampSlide 40000ms -34300ms linear infinite;
    }

    .rail .stamp:nth-child(18) {
        -webkit-animation: stampSlide 40000ms -36300ms linear infinite;
        animation: stampSlide 40000ms -36300ms linear infinite;
    }

    .rail .stamp:nth-child(19) {
        -webkit-animation: stampSlide 40000ms -38300ms linear infinite;
        animation: stampSlide 40000ms -38300ms linear infinite;
    }

    .rail .stamp:nth-child(20) {
        -webkit-animation: stampSlide 40000ms -40300ms linear infinite;
        animation: stampSlide 40000ms -40300ms linear infinite;
    }

    @-webkit-keyframes stampSlide {
        0% {
            -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
        }
        100% {
            -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
        }
    }

    @keyframes stampSlide {
        0% {
            -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
        }
        100% {
            -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
            transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
        }
    }

    .world {
        -webkit-transform: rotateX(-30deg) rotateY(-30deg);
        transform: rotateX(-30deg) rotateY(-30deg);
    }

    .world .forward {
        position: absolute;
        -webkit-animation: slide 2000ms linear infinite;
        animation: slide 2000ms linear infinite;
    }

    .world .box {
        width: 200px;
        height: 200px;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        -webkit-animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
        animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
    }

    .world .box .wall {
        position: absolute;
        width: 200px;
        height: 200px;
        background: rgba(10, 10, 10, 0.8);
        border: 1px solid #fafafa;
        box-sizing: border-box;
    }

    .world .box .wall::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 7rem;
    }

    .world .box .wall:nth-child(1) {
        -webkit-transform: translateZ(100px);
        transform: translateZ(100px);
    }

    .world .box .wall:nth-child(2) {
        -webkit-transform: rotateX(180deg) translateZ(100px);
        transform: rotateX(180deg) translateZ(100px);
    }

    .world .box .wall:nth-child(3) {
        -webkit-transform: rotateX(90deg) translateZ(100px);
        transform: rotateX(90deg) translateZ(100px);
    }

    .world .box .wall:nth-child(3)::before {
        -webkit-transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
        transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
        -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
        animation: zeroFour 4000ms -2000ms linear infinite;
    }

    .world .box .wall:nth-child(4) {
        -webkit-transform: rotateX(-90deg) translateZ(100px);
        transform: rotateX(-90deg) translateZ(100px);
    }

    .world .box .wall:nth-child(4)::before {
        -webkit-transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
        transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
        -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
        animation: zeroFour 4000ms -2000ms linear infinite;
    }

    .world .box .wall:nth-child(5) {
        -webkit-transform: rotateY(90deg) translateZ(100px);
        transform: rotateY(90deg) translateZ(100px);
    }

    .world .box .wall:nth-child(5)::before {
        -webkit-transform: rotateX(180deg) translateZ(-1px);
        transform: rotateX(180deg) translateZ(-1px);
        -webkit-animation: zeroFour 4000ms linear infinite;
        animation: zeroFour 4000ms linear infinite;
    }

    .world .box .wall:nth-child(6) {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        transform: rotateY(-90deg) translateZ(100px);
    }

    .world .box .wall:nth-child(6)::before {
        -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
        transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
        -webkit-animation: zeroFour 4000ms linear infinite;
        animation: zeroFour 4000ms linear infinite;
    }

    @-webkit-keyframes zeroFour {
        0% {
            content: "4";
        }
        100% {
            content: "0";
        }
    }

    @keyframes zeroFour {
        0% {
            content: "4";
        }
        100% {
            content: "0";
        }
    }

    @-webkit-keyframes roll {
        0% {
            -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
        }
        85% {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        87% {
            -webkit-transform: rotateZ(88deg);
            transform: rotateZ(88deg);
        }
        90% {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        100% {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
    }

    @keyframes roll {
        0% {
            -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
        }
        85% {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        87% {
            -webkit-transform: rotateZ(88deg);
            transform: rotateZ(88deg);
        }
        90% {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        100% {
            -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
    }

    @-webkit-keyframes slide {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
        }
    }

    @keyframes slide {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
        }
    }
</style>
<body>

<div class="NotPage">
    <div class="message">功 能 开 发 中 ...</div>
    <div class="rail">
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
        <div class="stamp four">4</div>
        <div class="stamp zero">0</div>
    </div>
    <div class="world">
        <div class="forward">
            <div class="box">
                <div class="wall"></div>
                <div class="wall"></div>
                <div class="wall"></div>
                <div class="wall"></div>
                <div class="wall"></div>
                <div class="wall"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

　　

 

炫酷的404页面

标签：hidden   bsp   wal   port   viewport   add   center   for   ima   

原文地址：https://www.cnblogs.com/aloneindefeat/p/14541941.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！