1. 全栈程序员必看首页

一款好看的404页面代码 | 滚动的404[通俗易懂]

全栈程序员-站长 • • 未分类 • 阅读 136

<!doctypehtml><html><head><metacharset=”utf-8″><title>网站404</title><style>body{background:#000;height:100vh;overflow:…

大家好，又见面了，我是你们的朋友全栈君。

一款好看的404页面代码 | 滚动的404[通俗易懂]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站404</title>

<style>
body {
    
    
  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>
</head>
<body>

<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>

</body>
</html>

 截图

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/124649.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 8.app后端和web后端的区别

    8.app后端和web后端的区别

    8.app后端和web后端的区别很多从web后端转到app后端的小伙伴经常很茫然，不知道这两者之间有啥区别。本文通过例子，分析web后端和app后端的区别，使各位更好地把握app后端的架构。

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月22日
    54
  • NSGA2 Matlab toolbox

    NSGA2 Matlab toolbox

    NSGA2 Matlab toolbox最近做数模，偶然间发现这个算法，还在学习中，下面转载下资料。NSGA-II是一个很成熟的多目标优化算法了。根本原理还是Patero最优问题。NSGA-IImatlab代码，网上比较有名的是AravindSeshadri写的，采用的是BSD许可证。它的程序可以在http://www.mathworks.com/matlabcentral/fileexchange/10

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月19日
    69
  • php502bad gateway,PHP表单提交后出现502 bad gateway解决办法

    php502bad gateway,PHP表单提交后出现502 bad gateway解决办法

    php502bad gateway,PHP表单提交后出现502 bad gateway解决办法搜索热词《PHP表单提交后出现502badgateway解决办法》要点：本文介绍了PHP表单提交后出现502badgateway解决办法，希望对您有用。如果有疑问，可以联系我们。有时侯，提交表单后，服务器出现“502badgateway”错误，这种情况一般都是大的文章内容。网站的解决办法有：1、修改PHP.INI中的memory_limit，加大到64M，但现在默认的PHP配置就是12…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月18日
    30
  • js原生判断是否是数字类型[通俗易懂]

    js原生判断是否是数字类型[通俗易懂]

    js原生判断是否是数字类型[通俗易懂]js判断数字类型汇总最近在写代码的时候，有些逻辑需要判断数字类型，等用到的时候才发现自己了解的方法不太严密，然后就决心查资料汇总了解下有哪些方法比较严密第一种：typeof+isNaN使用typeof可以判断是否是一个数字类型，但是NaN也是数字类型，为了筛除这个可能，进一步通过isNaN来筛除。这种方法会遗漏InfinityfunctionisNumber(num){ retu…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月28日
    22
  • Waiting for another flutter command to release the startup lock…

    Waiting for another flutter command to release the startup lock…

    Waiting for another flutter command to release the startup lock…

    全栈程序员-站长的头像 全栈程序员-站长
    2021年10月1日
    40
  • React路由重定向Redirect[通俗易懂]

    React路由重定向Redirect[通俗易懂]

    React路由重定向Redirect[通俗易懂]react路由重定向<Switch>{/*<Routepath=”/”exactcomponent={NewsPage}/>*/}<Routepath=”/my”component={MyPage}/><Routepath=”/news…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月30日
    41

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号