CSS3绘制404页面
标题有点噱了...
最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个.
只用的CSS3中的旋转, 效果如下
上代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Error</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="circle">
<div>
<span class="block"></span><span>404</span><span class="block"></span>
</div>
</div>
</body>
</html>
兼容IE9+ 及其他, 主要是 transform 的兼容问题, 以下来自这里:
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
虽然除了 transform, 还有其他可以玩的, 像圆角, 404两边的条, 但是觉得效果这个东西, 还是不要炫技术的好.
本来不想上传效果图的, 弄了弄发现css写css代码会被注释掉, 诶 申请个js权限去
转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/css3-circle-404.html
CSS3绘制404页面的更多相关文章
- 一款纯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 <error-page> ...
随机推荐
- AE开发实现GP工具IDW
IDW——空间插值 IDW(Inverse Distance Weighted)是一种常用而简便的空间插值方法,它以插值点与样本点间的距离为权重进行加权平均,离插值点越近的样本点赋予的权重越大. 设平 ...
- 关于application/x-www-form-urlencoded等字符编码的解释说明
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...
- js中的逻辑与（&&）和逻辑或（||）
之前有一个同事去面试,面试过程中碰到这样一个问题: 在js中写出如下的答案 : var a = 2; var b = 3; var andflag = a && b ; var orf ...
- UITableView的添加、删除、移动操作
#pragma mark -----表视图的移动操作----- //移动的第一步也是需要将表视图的编辑状态打开 //2.指定哪些行可以进行移动 - (BOOL)tableView:(UITableVi ...
- [Head First设计模式]生活中学设计模式——迭代器模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- ThinkPHP配置简单的mysql读写分离
ThinkPHP内置了分布式数据库的支持,包括主从式数据库的读写分离,但是分布式数据库必须是相同的数据库类型. 配置DB_DEPLOY_TYPE 为1 可以采用分布式数据库支持.如果采用分布式数据库, ...
- javascript数据结构-栈
github博客地址 栈(stack)又名堆栈,它是一种运算受限的线性表.遵循后进先出原则,像垃圾桶似的.功能实现依然按照增删改查来进行,内部数据存储可以借用语言原生支持的数组. 栈类 functio ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- (转)Intent flag 与启动模式的对应关系
原文地址:http://www.cnblogs.com/ttylinux/p/4069513.html Activity有四种启动模式: 1.standard(标准) 2.singleTop ...
- C语言中史上最愚蠢的Bug
C语言中史上最愚蠢的Bug 本文来自“The most stupid C bug ever”,很有意思,分享给大家.我相信这样的bug,就算你是高手你也会犯的.你来看看作者犯的这个Bug吧.. 首 ...