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> ...
随机推荐
- Google Map API V3开发(1)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
- hashicorp/consul
https://github.com/hashicorp/consul/tree/master/vendor/github.com/boltdb/bolt
- JSP内置对象之application对象
虽然常把Web应用称为B/S架构的应用,但其实Web应用一样是C/S结构的应用,只是这种应用的服务器是Web服务器,而客户端是浏览器. 现在抛开Web应用直接看Web服务器和浏览器. Web服务器负责 ...
- java中的等于
数字的比较等于用“==” 不等于用“!=” 字符的比较等于用“.equals”不等于用”!s1.equals(s2)“
- Codeforces#262_1002
Codeforces#262_1002 B. Little Dima and Equation time limit per test 1 second memory limit per test 2 ...
- 创建maven工程时总是带有后缀名Maven Webapp解决办法
做项目时突然遇到了一个新问题,从前没有的,今天不知怎么了突然有了这个问题,maven创建web项目时多出了后缀名maven webapp ,很碍眼,而且访问路径还得删了,这个后缀名才可访问,所以找了答 ...
- 《征服 C 指针》摘录6:解读 C 的声明
一.混乱的声明——如何自然地理解 C 的声明? 通常,C 的声明 int hoge; 这样,使用“类型 变量名;”的形式进行书写. 可是,像“指向 int 的指针”类型的变量,却要像下面这样进行声明: ...
- Linux C 文件输入输出函数 fopen()、getc()/fgetc()、putc()/fputc()、fclose()、fprintf()、fscanf()、fgets()、fputs()、fseek()、ftell()、fgetpos()、fsetpos() 详解
fopen(打开文件) 定义函数 FILE * fopen(const char * path,const char * mode); 函数说明 参数path字符串包含欲打开的文件路径及文件名,参 ...
- JS 做的鼠标放大镜(初级)
这今天我们学习鼠标的各种事件,我给大家分享一下鼠标放大镜的效果. 希望有兴趣的朋友可以一块交流. <!DOCTYPE html><html> <head> < ...