[转]一个炫酷的404页面

in 源码
5775 3


逛友链发现的一个不错的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>


原文链接：http://blogbyme.cn/2018/06/599.html

本文作者：风雪，转载时请注明本文出处：https://www.fxnetw.com/28.html
none
前一篇：利用msf的ms17_010模块提权
后一篇：burpsuite抓手机的包
取消

发表评论

共3条评论

    Austen

    2018-07-19 Windows10 / FireFox 回复

    我来了，貌似在我的站直接复制源码是有点问题，回去捣鼓捣鼓 。感谢转载~~~

    绅士福利

    2018-08-19 Windows10 / Chrome 回复

    化繁为简，感觉比较耗。

    莫愁鸟

    2018-08-29 Windows7 / Chrome 回复

    急需您的联系方式，打赏也给退回了

设置
配色方案
布局
现在购买