404page html （挺好玩的404页面）

技术分享 · Fecmall · 于 2年前 发布 · 848 次阅读

一个挺好玩的404页面：


<!DOCTYPE html>
<html style="height:100%">
<head>
    <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
    <title>404 Not Found</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">404 Not Found</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>
···
1 个赞 踩 感谢 关注 收藏
共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册。
FECMALL
FECMALL 是一个真正开源的电商商城，公司项目商用免费授权。
现在注册
已注册用户请  登录
fecify

重要公告

Fecmall一览表

作者Terry寄语

Fecmall-2.x在持续开发中， 后面的工作主要是增强fecmall的用户体验，以及做模板插件周边市场，修复fecmall的bug和添加一些特殊必要性的功能， 欢迎各位在自己的电商项目使用fecmall， 对于官方fecmall后面的功能的添加，会以独立扩展插件的形式制作，而不是在fecmall主体上面 添加， 有问题在论坛发帖，帖子一般在24小时内回复， 论坛发帖，这样可以形成 积累，同样的问题回答一次，后面的人可以通过搜索 找到历史帖子解决问题，节省时间 ，Fecmall的流行离不开大家的努力！
致谢！
Your Site Analytics