首页 网站资讯网站教程正文

分享一款黑色css3方块翻滚动画404页面模板+各种环境下404页面设置教程

2018-07-25 966 网站教程




一般网站中都有404页面,直接删除代码复制下面的代码即可。如果你的网站没有的话,请按以下方法设置或自行研究。


服务器中设置404指向一个设计好的html 文件

1、现在的空间提供商基本都提供404设置的功能,直接上传文件,然后设置即可。

2、自己在服务器中,用IIs中设置方法:打开IIS管理器-->点击要设置自定义404的网站的属性-->点击自定义错误选项-->选中404页-->选中并打开编辑属性-->设置成 URL --> URL 里填写“/err404.html”-->按确定退出再把做好的err404.html 页面上传到网站根目录下。此处在“消息类型”中一定要选择“文件”或“默认值”,而不要选择“URL”,不然,将导致返回“200”状态码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 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>


1:如非特殊说明,本站对提供的源码不拥有任何权利,其版权归原著者拥有。

2:请勿将该源码、软件进行商业交易、转载等行为,该源码、软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。

3:本网站所有源码和软件均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。如有侵犯你版权的,请来信(邮箱:milixiaowu@vip.qq.com)指出,本站将立即改正。

通知:原价188年费会员降价100,只需88即可购买,活动即将结束!

点击购买

×
M