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