标题有点噱了...
最近在做一个交通有关的项目, 想做一个类似标志牌的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. windows下pip安装python模块时报错总结

    http://www.cnblogs.com/liaojiafa/p/5100550.html 前言: 这几天把python版本升级后,发现pip安装模块好多都报错(暂不确定是不是因为升级导致的),我 ...

  2. tnt_esri.dat Arcgis8.1安装license

    arcgis8.1授权文件内容,复制个txt重命名为tnt_esri.dat即可.注意替换yourcomputername为你的计算机名   SERVER yourcomputername ESRI_ ...

  3. Python调用服务接口

    #! /usr/bin/env python # coding=utf-8 ############################################################## ...

  4. 数据导入导出Oracle数据库

    临近春节,接到了一个导入数据的任务,在Linux客户端中的数据有50G,大约3亿3千万行: 刚开始很天真,把原始的txt/csv文件用sh脚本转化成了oralce 的insert into 语句,然后 ...

  5. WP8下实现刮刮乐(橡皮擦)功能

    说到刮刮乐这个功能,我们最先想到的是上下两张(长方形)重叠,之后对上面这张图片进行操作. 我的想法是:通过手势,让手指划过的地方变成透明的,底部就会显示了. 那如何让图片变为透明呢?这就要对图片的像素 ...

  6. Github.com的Git和TortoiseGit图文教程

    图文介绍Windows系统下使用 Github账户 + msysgit + TortoiseGit 进行文件管理的方法. 安装 安装mysysgit 下载地址:msysgit 安装过程: 0.启动 1 ...

  7. Mac Pro 安装 Sublime Text 3，个性化设置，主题 和 插件 收藏

    1.到官网下载安装包 http://www.sublimetext.com/3 2.附注册码一枚 Sublime Text 3 3126 —– BEGIN LICENSE —– Alexey Plut ...

  8. MySQL SQL Mode及相关问题

    MySQL可以运行于不同的SQLMode下,Mode定义了MySQL应支持的SQL语法.数据校验等. 一.Mode会影响到日期类型.字符串类型等的插入操作.其中多种模式影响了对某些特殊字符如何理解的问 ...

  9. 理解记忆三种常见字符编码：ASCII, Unicode,UTF-8

    理解什么是字符编码? 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以,一个字节能表示的最大的整数就是25 ...

  10. JQuery中对option的添加、删除、取值

    jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...});    //为Selec ...