您现在的位置是:网站首页> 编程资料编程资料
实例教程 利用html5和css3打造一款创意404页面html5实现的模拟电视没有信号错误404页面动画效果源码html5和svg实现太空人404错误页面动画模板特效源码
2021-09-01
987人已围观
简介 你的网站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;
}
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页面。大家可以尝试一下哦。
提示:
本文由神整理自网络,如有侵权请联系本站删除!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
本站声明:
1、本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持;
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途;否则由此产生的法律后果,本站概不负责!
相关内容
- 基于html5实现的图片墙效果HTML5实现倾斜悬挂图片墙响应鼠标可移动效果HTML5实践-图片设置成灰度图html5 拖拽上传图片实例演示HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览HTML5实现的3D相册图片轮播动画特效源码HTML5图片预览实例分享利用HTML5的新特点实现图片文件异步上传一款超炫HTML5 3D立体图片相册效果HTML5 3D骨牌鼠标滑过图片呈现3D的效果在HTML5 Canvas中放入图片和保存为图片的方法
- html5版canvas自由拼图实例canvas拼图功能实现代码示例
- HTML5地理定位实例HTML5地理定位_动力节点Java学院整理HTML5实现获取地理位置信息并定位功能简单html5代码获取地理位置h5实现获取用户地理定位的实例代码
- 使用 HTML5 Canvas 制作水波纹效果点击图片就会触发canvas三角函数模拟水波效果的示例代码
- 一款html5 canvas实现的图片玻璃碎片特效html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- html5中的input新属性range使用记录HTML5新增的8类INPUT输入类型介绍html禁止清除input文本输入缓存的两种方法HTML5 input placeholder 颜色修改示例HTML 5 input placeholder 属性如何完美兼任ieHTML5 input元素类型:email及url介绍html5 input属性使用示例html4和html5区别之如何在一个input上添加焦点实现代码HTML5 input新增type属性color颜色拾取器的实例代码
- 浅谈html5 响应式布局吃透移动端 Html5 响应式布局
- html5+svg学习指南之SVG基础知识基于html5实现的svg图标手机菜单动态特效源码html5基于svg实现圆形进度统计动画特效源码基于HTML5 SVG制作汉堡包菜单按钮分段动画效果深入解析HTML5使用SVG图像时的viewBox属性用法HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色HTML5 SVG实现的Loading动画加载特效源码深入浅析HTML5中的SVG
- canvas需要在标签里直接定义宽高html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 使用canvas绘制贝塞尔曲线HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线用html5的canvas画布绘制贝塞尔曲线完整代码canvas仿写贝塞尔曲线的示例代码
点击排行
本栏推荐
