标题有点噱了...
最近在做一个交通有关的项目, 想做一个类似标志牌的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页面的更多相关文章

  1. 一款纯css3实现的漂亮的404页面

    之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...

  2. html5和css3打造一款创意404页面

    之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览   源码下载 实现的代码. h ...

  3. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  4. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  5. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  6. CSS3制作404立体字体

    CSS3制作404立体字体页面效果     鼠标移动上去,背景色变白.       动态效果:     .demo p:first-child span:hover { text-shadow:0px ...

  7. thinkphp访问不存在的模块或者方法跳转到404页面

    使用的thinkphp 版本是3.2.0, 在config.php中配置 404地址,即可: 'TMPL_EXCEPTION_FILE' => './Application/Home/View/ ...

  8. 网站设置404页面 --nginx

    有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/  输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...

  9. JavaWeb 自定义404页面

    本来,Tomcat中自定义404页面不过是在web.xml文件中写4行代码的事情. 直接引用 Tomcat官方FAQ 怎样自定义404页面? 编辑web.xml <error-page> ...

随机推荐

  1. 在linux终端远程登陆linux服务器

    在linux终端远程登陆linux服务器   原来在Linux终端远程登陆linux服务器是那么的容易,如果的服务器用户名是abc(也可以是root),只需要在终端输入: 然后电脑会提示输入密码就登录 ...

  2. 适配iOS10以及Xcode8

    现在在苹果的官网上,我们已经可以下载到Xcode8的GM版本了,加上9.14日凌晨,苹果就要正式推出iOS10系统的推送了,在此之际,iOS10的适配已经迫在眉睫啦,不知道Xcode8 beat版本, ...

  3. web在线打印,打印阅览,打印维护,打印设计

    winform打印的方案比较多,实现也比较容易,而且效果也非常炫:但现在越来越多的系统是web系统,甚至是移动端.网上也有非常的web打印方案,但各式各样的问题非常多,比如js兼容性,稳定性等一直缠绕 ...

  4. Sizzle选择器引擎介绍

    一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍. ...

  5. C# 的界面控件属性修改线程安全问题

    今天在实验delegate与thread 在初步的实验结束后,因为原来的delegate只有一个函数会被调用,感觉没有达到delegate的极致,所以又重新自己定义了一个delegate,在另一个线程 ...

  6. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  7. PHP模板引擎正则替换函数 preg_replace 与 preg_replace_callback 使用总结

    在编写PHP模板引擎工具类时,以前常用的一个正则替换函数为 preg_replace(),加上正则修饰符 /e,就能够执行强大的回调函数,实现模板引擎编译(其实就是字符串替换). 详情介绍参考博文:P ...

  8. bash 语法使用

    1.定义函数时,不需要使用function作为函数的命名. 函数不需要形参. 函数名不能以数字作为开头 main() { in ) 1_start ;; ) 1_start 5_start ;; ) ...

  9. POJ2914 (未解决)无向图最小割|Stoer-Wagner算法|模板

    还不是很懂,贴两篇学习的博客: http://www.hankcs.com/program/algorithm/poj-2914-minimum-cut.html http://blog.sina.c ...

  10. Google疯了,竟然这样!

    导读 一个小问题:你每天做什么事?当然了,好多事情,但是我可以指出一件事,你几乎每天都会用 Google 搜索,我说的对吗?现在,如果你是一位 Linux 用户,这里有另外一个问题:如果你甚至不用离开 ...