新人第一天报道!不知道帖子有什么隐藏功能,所以决定水一水!

zengtao   ·   发表于 2018-10-10 20:45:54   ·   闲聊灌水区
一款炫酷的404页面,送给大家。
  1. <!doctype html>
  2. <html>
  3. <head>
  4.    <meta charset="utf-8">
  5.    <title>404</title>

  6.    <style>
  7.        body {
  8.            background: #000;
  9.            height: 100vh;
  10.            overflow: hidden;
  11.            display: flex;
  12.            font-family: 'Anton', sans-serif;
  13.            justify-content: center;
  14.            align-items: center;
  15.            -webkit-perspective: 1000px;
  16.            perspective: 1000px;
  17.        }

  18.        div {
  19.            -webkit-transform-style: preserve-3d;
  20.            transform-style: preserve-3d;
  21.        }

  22.        .rail {
  23.            position: absolute;
  24.            width: 100%;
  25.            height: 100%;
  26.            display: flex;
  27.            justify-content: center;
  28.            align-items: center;
  29.            -webkit-transform: rotateX(-30deg) rotateY(-30deg);
  30.            transform: rotateX(-30deg) rotateY(-30deg);
  31.        }
  32.        .rail .stamp {
  33.            position: absolute;
  34.            width: 200px;
  35.            height: 200px;
  36.            display: flex;
  37.            justify-content: center;
  38.            align-items: center;
  39.            background: #141414;
  40.            color: #fff;
  41.            font-size: 7rem;
  42.        }
  43.        .rail .stamp:nth-child(1) {
  44.            -webkit-animation: stampSlide 40000ms -2300ms linear infinite;
  45.            animation: stampSlide 40000ms -2300ms linear infinite;
  46.        }
  47.        .rail .stamp:nth-child(2) {
  48.            -webkit-animation: stampSlide 40000ms -4300ms linear infinite;
  49.            animation: stampSlide 40000ms -4300ms linear infinite;
  50.        }
  51.        .rail .stamp:nth-child(3) {
  52.            -webkit-animation: stampSlide 40000ms -6300ms linear infinite;
  53.            animation: stampSlide 40000ms -6300ms linear infinite;
  54.        }
  55.        .rail .stamp:nth-child(4) {
  56.            -webkit-animation: stampSlide 40000ms -8300ms linear infinite;
  57.            animation: stampSlide 40000ms -8300ms linear infinite;
  58.        }
  59.        .rail .stamp:nth-child(5) {
  60.            -webkit-animation: stampSlide 40000ms -10300ms linear infinite;
  61.            animation: stampSlide 40000ms -10300ms linear infinite;
  62.        }
  63.        .rail .stamp:nth-child(6) {
  64.            -webkit-animation: stampSlide 40000ms -12300ms linear infinite;
  65.            animation: stampSlide 40000ms -12300ms linear infinite;
  66.        }
  67.        .rail .stamp:nth-child(7) {
  68.            -webkit-animation: stampSlide 40000ms -14300ms linear infinite;
  69.            animation: stampSlide 40000ms -14300ms linear infinite;
  70.        }
  71.        .rail .stamp:nth-child(8) {
  72.            -webkit-animation: stampSlide 40000ms -16300ms linear infinite;
  73.            animation: stampSlide 40000ms -16300ms linear infinite;
  74.        }
  75.        .rail .stamp:nth-child(9) {
  76.            -webkit-animation: stampSlide 40000ms -18300ms linear infinite;
  77.            animation: stampSlide 40000ms -18300ms linear infinite;
  78.        }
  79.        .rail .stamp:nth-child(10) {
  80.            -webkit-animation: stampSlide 40000ms -20300ms linear infinite;
  81.            animation: stampSlide 40000ms -20300ms linear infinite;
  82.        }
  83.        .rail .stamp:nth-child(11) {
  84.            -webkit-animation: stampSlide 40000ms -22300ms linear infinite;
  85.            animation: stampSlide 40000ms -22300ms linear infinite;
  86.        }
  87.        .rail .stamp:nth-child(12) {
  88.            -webkit-animation: stampSlide 40000ms -24300ms linear infinite;
  89.            animation: stampSlide 40000ms -24300ms linear infinite;
  90.        }
  91.        .rail .stamp:nth-child(13) {
  92.            -webkit-animation: stampSlide 40000ms -26300ms linear infinite;
  93.            animation: stampSlide 40000ms -26300ms linear infinite;
  94.        }
  95.        .rail .stamp:nth-child(14) {
  96.            -webkit-animation: stampSlide 40000ms -28300ms linear infinite;
  97.            animation: stampSlide 40000ms -28300ms linear infinite;
  98.        }
  99.        .rail .stamp:nth-child(15) {
  100.            -webkit-animation: stampSlide 40000ms -30300ms linear infinite;
  101.            animation: stampSlide 40000ms -30300ms linear infinite;
  102.        }
  103.        .rail .stamp:nth-child(16) {
  104.            -webkit-animation: stampSlide 40000ms -32300ms linear infinite;
  105.            animation: stampSlide 40000ms -32300ms linear infinite;
  106.        }
  107.        .rail .stamp:nth-child(17) {
  108.            -webkit-animation: stampSlide 40000ms -34300ms linear infinite;
  109.            animation: stampSlide 40000ms -34300ms linear infinite;
  110.        }
  111.        .rail .stamp:nth-child(18) {
  112.            -webkit-animation: stampSlide 40000ms -36300ms linear infinite;
  113.            animation: stampSlide 40000ms -36300ms linear infinite;
  114.        }
  115.        .rail .stamp:nth-child(19) {
  116.            -webkit-animation: stampSlide 40000ms -38300ms linear infinite;
  117.            animation: stampSlide 40000ms -38300ms linear infinite;
  118.        }
  119.        .rail .stamp:nth-child(20) {
  120.            -webkit-animation: stampSlide 40000ms -40300ms linear infinite;
  121.            animation: stampSlide 40000ms -40300ms linear infinite;
  122.        }

  123.        @-webkit-keyframes stampSlide {
  124.            0% {
  125.                -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  126.                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  127.            }
  128.            100% {
  129.                -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  130.                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  131.            }
  132.        }

  133.        @keyframes stampSlide {
  134.            0% {
  135.                -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  136.                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  137.            }
  138.            100% {
  139.                -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  140.                transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  141.            }
  142.        }
  143.        .world {
  144.            -webkit-transform: rotateX(-30deg) rotateY(-30deg);
  145.            transform: rotateX(-30deg) rotateY(-30deg);
  146.        }
  147.        .world .forward {
  148.            position: absolute;
  149.            -webkit-animation: slide 2000ms linear infinite;
  150.            animation: slide 2000ms linear infinite;
  151.        }
  152.        .world .box {
  153.            width: 200px;
  154.            height: 200px;
  155.            -webkit-transform-origin: 100% 100%;
  156.            transform-origin: 100% 100%;
  157.            -webkit-animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
  158.            animation: roll 2000ms cubic-bezier(1, 0.01, 1, 1) infinite;
  159.        }
  160.        .world .box .wall {
  161.            position: absolute;
  162.            width: 200px;
  163.            height: 200px;
  164.            background: rgba(10, 10, 10, 0.8);
  165.            border: 1px solid #fafafa;
  166.            box-sizing: border-box;
  167.        }
  168.        .world .box .wall::before {
  169.            content: '';
  170.            position: absolute;
  171.            width: 100%;
  172.            height: 100%;
  173.            display: flex;
  174.            justify-content: center;
  175.            align-items: center;
  176.            color: #fff;
  177.            font-size: 7rem;
  178.        }
  179.        .world .box .wall:nth-child(1) {
  180.            -webkit-transform: translateZ(100px);
  181.            transform: translateZ(100px);
  182.        }
  183.        .world .box .wall:nth-child(2) {
  184.            -webkit-transform: rotateX(180deg) translateZ(100px);
  185.            transform: rotateX(180deg) translateZ(100px);
  186.        }
  187.        .world .box .wall:nth-child(3) {
  188.            -webkit-transform: rotateX(90deg) translateZ(100px);
  189.            transform: rotateX(90deg) translateZ(100px);
  190.        }
  191.        .world .box .wall:nth-child(3)::before {
  192.            -webkit-transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  193.            transform: rotateX(180deg) rotateZ(90deg) translateZ(-1px);
  194.            -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
  195.            animation: zeroFour 4000ms -2000ms linear infinite;
  196.        }
  197.        .world .box .wall:nth-child(4) {
  198.            -webkit-transform: rotateX(-90deg) translateZ(100px);
  199.            transform: rotateX(-90deg) translateZ(100px);
  200.        }
  201.        .world .box .wall:nth-child(4)::before {
  202.            -webkit-transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  203.            transform: rotateX(180deg) rotateZ(-90deg) translateZ(-1px);
  204.            -webkit-animation: zeroFour 4000ms -2000ms linear infinite;
  205.            animation: zeroFour 4000ms -2000ms linear infinite;
  206.        }
  207.        .world .box .wall:nth-child(5) {
  208.            -webkit-transform: rotateY(90deg) translateZ(100px);
  209.            transform: rotateY(90deg) translateZ(100px);
  210.        }
  211.        .world .box .wall:nth-child(5)::before {
  212.            -webkit-transform: rotateX(180deg) translateZ(-1px);
  213.            transform: rotateX(180deg) translateZ(-1px);
  214.            -webkit-animation: zeroFour 4000ms linear infinite;
  215.            animation: zeroFour 4000ms linear infinite;
  216.        }
  217.        .world .box .wall:nth-child(6) {
  218.            -webkit-transform: rotateY(-90deg) translateZ(100px);
  219.            transform: rotateY(-90deg) translateZ(100px);
  220.        }
  221.        .world .box .wall:nth-child(6)::before {
  222.            -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  223.            transform: rotateX(180deg) rotateZ(180deg) translateZ(-1px);
  224.            -webkit-animation: zeroFour 4000ms linear infinite;
  225.            animation: zeroFour 4000ms linear infinite;
  226.        }

  227.        @-webkit-keyframes zeroFour {
  228.            0% {
  229.                content: '4';
  230.            }
  231.            100% {
  232.                content: '0';
  233.            }
  234.        }

  235.        @keyframes zeroFour {
  236.            0% {
  237.                content: '4';
  238.            }
  239.            100% {
  240.                content: '0';
  241.            }
  242.        }
  243.        @-webkit-keyframes roll {
  244.            0% {
  245.                -webkit-transform: rotateZ(0deg);
  246.                transform: rotateZ(0deg);
  247.            }
  248.            85% {
  249.                -webkit-transform: rotateZ(90deg);
  250.                transform: rotateZ(90deg);
  251.            }
  252.            87% {
  253.                -webkit-transform: rotateZ(88deg);
  254.                transform: rotateZ(88deg);
  255.            }
  256.            90% {
  257.                -webkit-transform: rotateZ(90deg);
  258.                transform: rotateZ(90deg);
  259.            }
  260.            100% {
  261.                -webkit-transform: rotateZ(90deg);
  262.                transform: rotateZ(90deg);
  263.            }
  264.        }
  265.        @keyframes roll {
  266.            0% {
  267.                -webkit-transform: rotateZ(0deg);
  268.                transform: rotateZ(0deg);
  269.            }
  270.            85% {
  271.                -webkit-transform: rotateZ(90deg);
  272.                transform: rotateZ(90deg);
  273.            }
  274.            87% {
  275.                -webkit-transform: rotateZ(88deg);
  276.                transform: rotateZ(88deg);
  277.            }
  278.            90% {
  279.                -webkit-transform: rotateZ(90deg);
  280.                transform: rotateZ(90deg);
  281.            }
  282.            100% {
  283.                -webkit-transform: rotateZ(90deg);
  284.                transform: rotateZ(90deg);
  285.            }
  286.        }
  287.        @-webkit-keyframes slide {
  288.            0% {
  289.                -webkit-transform: translateX(0);
  290.                transform: translateX(0);
  291.            }
  292.            100% {
  293.                -webkit-transform: translateX(-200px);
  294.                transform: translateX(-200px);
  295.            }
  296.        }
  297.        @keyframes slide {
  298.            0% {
  299.                -webkit-transform: translateX(0);
  300.                transform: translateX(0);
  301.            }
  302.            100% {
  303.                -webkit-transform: translateX(-200px);
  304.                transform: translateX(-200px);
  305.            }
  306.        }
  307.    </style>
  308. </head>
  309. <body>

  310. <div class="rail">
  311.    <div class="stamp four">4</div>
  312.    <div class="stamp zero">0</div>
  313.    <div class="stamp four">4</div>
  314.    <div class="stamp zero">0</div>
  315.    <div class="stamp four">4</div>
  316.    <div class="stamp zero">0</div>
  317.    <div class="stamp four">4</div>
  318.    <div class="stamp zero">0</div>
  319.    <div class="stamp four">4</div>
  320.    <div class="stamp zero">0</div>
  321.    <div class="stamp four">4</div>
  322.    <div class="stamp zero">0</div>
  323.    <div class="stamp four">4</div>
  324.    <div class="stamp zero">0</div>
  325.    <div class="stamp four">4</div>
  326.    <div class="stamp zero">0</div>
  327.    <div class="stamp four">4</div>
  328.    <div class="stamp zero">0</div>
  329.    <div class="stamp four">4</div>
  330.    <div class="stamp zero">0</div>
  331. </div>
  332. <div class="world">
  333.    <div class="forward">
  334.        <div class="box">
  335.            <div class="wall"></div>
  336.            <div class="wall"></div>
  337.            <div class="wall"></div>
  338.            <div class="wall"></div>
  339.            <div class="wall"></div>
  340.            <div class="wall"></div>
  341.        </div>
  342.    </div>
  343. </div>

  344. </body>
  345. </html>


打赏我,让我更有动力~

0 Reply   |  Until 2018-10-10 | 1366 View
LoginCan Publish Content
返回顶部 投诉反馈

© 2016 - 2024 掌控者 All Rights Reserved.