论坛首页 > 闲聊灌水区

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

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

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

  20.         div {
  21.             -webkit-transform-style: preserve-3d;
  22.             transform-style: preserve-3d;
  23.         }

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

  127.         @-webkit-keyframes stampSlide {
  128.             0% {
  129.                 -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  130.                 transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
  131.             }
  132.             100% {
  133.                 -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  134.                 transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-3870px);
  135.             }
  136.         }

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

  233.         @-webkit-keyframes zeroFour {
  234.             0% {
  235.                 content: '4';
  236.             }
  237.             100% {
  238.                 content: '0';
  239.             }
  240.         }

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

  318. <div class="rail">
  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 class="stamp four">4</div>
  332.     <div class="stamp zero">0</div>
  333.     <div class="stamp four">4</div>
  334.     <div class="stamp zero">0</div>
  335.     <div class="stamp four">4</div>
  336.     <div class="stamp zero">0</div>
  337.     <div class="stamp four">4</div>
  338.     <div class="stamp zero">0</div>
  339. </div>
  340. <div class="world">
  341.     <div class="forward">
  342.         <div class="box">
  343.             <div class="wall"></div>
  344.             <div class="wall"></div>
  345.             <div class="wall"></div>
  346.             <div class="wall"></div>
  347.             <div class="wall"></div>
  348.             <div class="wall"></div>
  349.         </div>
  350.     </div>
  351. </div>

  353. </body>
  354. </html>


打赏我,让我更有动力~

0 条回复   |  直到 2018-10-10 | 1378 次浏览
登录后才可发表内容
返回顶部 投诉反馈

© 2016 - 2024 掌控者 All Rights Reserved.