绑定完请刷新页面
取消
刷新
登录 | 注册

分享好友

×
取消 复制
一款很好看的滚动 404 页面代码分享
2019-10-08 11:15:01

一款好看的 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: ;

height: ;

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

}

 {

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

}

 {

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

transform-origin:  ;

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

height: ;

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

}

 {

content: '0';

}

}

@keyframes zeroFour {

0% {

content: '4';

}

 {

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

}

 {

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

}

 {

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

}

@-webkit-keyframes slide {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

 {

-webkit-transform: translateX(-200px);

transform: translateX(-200px);

}

}

@keyframes slide {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

}

 {

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


本文转自：气人网红


上一篇：微服务SpringBoot－整合kafka和storm
下一篇：Python巧用上下文管理器和With语句精简代码
分享好友

分享这个小栈给你的朋友们，一起进步吧。

IT知识联盟
创建时间：2019-07-05 15:30:45
分享收集到的大小知识点
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅：虚拟交易，一经交易不退款；若特殊情况，可3日内客服咨询

• 专区发布评论属默认订阅所评论专区（除付费小栈外）

栈主、嘉宾

查看更多
  • 王超
    栈主

小栈成员

查看更多
  • ?
  • youou
  • gamebus
  • chinacc
戳我，来吐槽～

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8  北京市公安局海淀分局网监中心备案编号：11010802021510  未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员