您现在的位置是:网站首页> 编程资料编程资料

实例教程 利用html5和css3打造一款创意404页面html5实现的模拟电视没有信号错误404页面动画效果源码html5和svg实现太空人404错误页面动画模板特效源码

2021-09-01 989人已围观

简介 你的网站404页面能不能帮助别人记住你的网站呢?下面我们介绍一款html5和css3打造的创意404页面。404页面也要很有创意才可以哦,下面我们一起来看一下

  今天要的小编要再给大家带来一款html5和css3打造的创意404页面。一起看下效果图吧:

  实现的代码

  html代码:

  


复制代码
代码如下:









































































  css代码:


复制代码
代码如下:
.me404 {
width: 1000px;
height: 480px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -240px;
}
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #E8EBED;
}
.st1 {
fill: #FFFFFF;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #DBDFE1;
}
.st3 {
fill: #FFFFFF;
}
.st4 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #E8EBED;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #FFFFFF;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st6 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: none;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}

通过以上两种代码就可以实现一款很有创意404页面。大家可以尝试一下哦。

相关内容

-六神源码网