zoukankan html css js c++ java

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

查看全文

相关阅读:
PAT 乙级真题 1013.组个最小数
 PAT 乙级真题 1012.D进制的A+B
PAT 乙级真题 1011.个位数统计
 PAT 乙级真题 1010.月饼
 PAT 乙级真题 1009.1019.数字黑洞
 PAT 乙级真题 1008.锤子剪刀布
 PAT 乙级真题 1007.A除以B
PAT 乙级真题 1006.1016.部分A+B
C++自定义sort函数
 VS2017如何使用scanf函数

原文地址：https://www.cnblogs.com/zaiyuzhong/p/css3-circle-404.html