html css制作404页面,CSS3绘制404页面
标题有点噱了...
最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个.
只用的CSS3中的旋转, 效果如下
上代码:
Error
.circle {
width: 200px;
height: 200px;
border-radius: 200px;
border: 15px solid #B22727;
}
.circle > div {
color: #B22727;
font: bolder 50px arial;
transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);
-ms-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);
-moz-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);
-o-transform: matrix(0.642788,-0.766044,0.766044,0.642788,0,95);
position: absolute;
top: 0;
left: 0;
}
.block {
width: 60px;
display: inline-block;
height: 15px;
background-color: #B22727;
margin: 12px 10px;
}
404
兼容IE9+ 及其他, 主要是 transform 的兼容问题, 以下来自这里:
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
虽然除了 transform, 还有其他可以玩的, 像圆角, 404两边的条, 但是觉得效果这个东西, 还是不要炫技术的好.
本来不想上传效果图的, 弄了弄发现css写css代码会被注释掉, 诶 申请个js权限去
一款纯css3实现的漂亮的404页面
之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...
html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h ...
jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
【项目1-1】使用HTML5+CSS3绘制HTML5的logo
作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...
CSS3制作404立体字体
CSS3制作404立体字体页面效果 鼠标移动上去,背景色变白. 动态效果: .demo p:first-child span:hover { text-shadow:0px ...
thinkphp访问不存在的模块或者方法跳转到404页面
使用的thinkphp 版本是3.2.0, 在config.php中配置 404地址,即可: 'TMPL_EXCEPTION_FILE' => './Application/Home/View/ ...
网站设置404页面 --nginx
有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/ 输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...
JavaWeb 自定义404页面
本来,Tomcat中自定义404页面不过是在web.xml文件中写4行代码的事情. 直接引用 Tomcat官方FAQ 怎样自定义404页面? 编辑web.xml ...
随机推荐
VB将JSON映射到表格实现解析
现在抓取网页数据的时候,经常会遇到JSON的数据,相对于繁杂无标签名的HTML源,用JSON传回的数据比较直观好看点.但是从其中提炼数据也让人觉得很烦躁,基本上就是不断的查找,截取,或者组装成JS代码 ...
为什么静态成员、静态方法中不能用this和super关键字
1. 在静态方法中是不能使用this预定义对象引用的,即使其后边所操作的也是静态成员也不行. 因为this代表的是调用这个函数的对象的引用,而静态方法是属于类的,不属于对象,静态方法成功加载 ...
Space and GridLayout 教程
Ice Cream Sandwich (ICS) sports two new widgets that have been designed to support the richer user i ...
以下是jQuery和JavaScript实现相同操作的等价代码。
选择元素 Javascript代码 1.// jQuery 2.var els = $('.el'); 3. 4.// 原生方法 5.var els = document.queryS ...
融云(找到“每个App都有沟通的需求”的细分市场)
近日,国内著名App驾考宝典和融云达成合作,为应用增加IM功能,实现亿级用户之间聊天.消息一出,IM(即时通讯)领域的大佬,同时也是个上线不到两岁的新生力量,再次引发了行业的关注. 对业内人士而言,即 ...
安装Postgresql踩过的坑
PG安装相关的 1 系统语言的设置 PG的安装,和系统的locale设置有一定的关系,需要设置,如在.profile或.bashrc中 也可以运行下面的命令: dpkg-reconfigure lo ...
STL—对象的构造与析构
STL内存空间的配置/释放与对象内容的构造/析构,是分开进行的. 对象的构造.析构 对象的构造由construct函数完成,该函数内部调用定位new运算符,在指定的内存位置构造对象 ...
hdu5904 LCIS
这题惩罚我这种经常不管常数的懒人 直接 1e6 TLE 如果1e5对数组枚举过 诶其实很想吐槽些伤心事,但是还是不想在博客上吐口水 不管今年比赛结果如何 请享受比赛 #include
十个 PHP 开发者最容易犯的错误
PHP 语言让 WEB 端程序设计变得简单,这也是它能流行起来的原因.但也是因为它的简单,PHP 也慢慢发展成一个相对复杂的语言,层出不穷的框架,各种语言特性和版本差异都时常让搞的我们头大,不得不浪费 ...
记一个逻辑bug
1 从数据库中找出一个学生能选的毕业设计(毕设的select or not 字段表示本题目是否已经被选 此时就按照其值为n来查询) 2 用户选择某个毕设后,先更新毕设表(select ...
html css制作404页面,CSS3绘制404页面相关推荐
- css百度图片布局,css3绘制百度的小度熊
前几天看到一篇文章是写用css3绘制腾讯企鹅的.趁着今天有空,就用css3来写一个百度的小度熊.话不多说,开始上码. 爆照 先来一张呆萌小度熊的成果照. 在绘制小度熊之前,首先要对小度熊布局上进行一个 ...
- html怎么做动态切换效果,使用CSS制作一个比较炫酷的页面切换动画
今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了 ...
- 气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
- html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等.我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象 ...
- Kitty用HTML和css咋做,使用 CSS3 绘制 Hello Kitty
偶然间看到了 SegmentFault 上的一篇文章,感受这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,如今在这里记录一下详细的绘制过程.想要源码. ...
- css制作流程卡片,css3分页,卡片制作
1.分页: ul{ display: inline-block; margin: 0px; padding: 0px; } li{display: inline;} a{ float: left; c ...
- 用HTML加css制作立体方块,CSS3 三维变形实现立体方块特效源码
前言 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能类似.3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y ...
- css制作流程卡片,css3 column实现卡片瀑布流布局的示例代码
本文介绍了css3 column实现卡片瀑布流布局的示例代码,分享给大家,具体如下: 实现效果 今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的. 最后使用css3中的column属性实 ...
- css制作流程卡片,css3卡片效果制作代码实例
Insert title here /* 顶部的盒子 */ .container{ width:1320px; margin:50px auto; } /* 翻转类样式 */ .flip{ width ...
最新文章
- R语言找到CRAN库已经不在提供的包、手动下载并使用RStudio进行安装
- R语言使用ggplot2包使用geom_violin函数绘制小提琴图(水平小提琴图、垂直小提琴图、边缘不截断小提琴图)实战
- [转]Git忽略提交规则 - .gitignore配置运维总结
- [PHP]php发布和调用Webservice接口的案例
- oracle 连接greenplum,Oracle通过DBLINK访问GreenPlum
- Android 无法查看外部依赖jar的源码的问题
- 毕业设计管理系统PHP,asp.net/net/c#毕业论文管理系统-成品
- 计算机病毒与反病毒技术
- 深度学习——目前可用的3D人体数据集
- 企业微信加好友太频繁怎么办?
- [原创] 我了解北京地区消费贷利息情况
- sourceTree 问题解决
- 喷射计算机故障,电子燃油喷射系统常见故障
- js实现汉字转拼音(解决首字母排序问题)
- 如何做到像百度云或者网易公开课一样动态更换APP启动图
- 有一群海盗(不多于20人),在船上比拼酒量。
- 新星计划·能够 120% 提升博文美感的表情包,你们确定不心动吗?
- 【C】C课程设计-驾校考试模拟系统
- Java实现蓝桥杯分金币
- 64位 Eclipse IDE for Java EE Developers 下载地址