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>

View Code

兼容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