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>
兼容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页面的更多相关文章
- 一款纯css3实现的漂亮的404页面
之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...
- html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h ...
- jQuery+CSS3实现404背景动画特效
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- 【项目1-1】使用HTML5+CSS3绘制HTML5的logo
作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...
- CSS3制作404立体字体
CSS3制作404立体字体页面效果 鼠标移动上去,背景色变白. 动态效果: .demo p:first-child span:hover { text-shadow:0px ...
- thinkphp访问不存在的模块或者方法跳转到404页面
使用的thinkphp 版本是3.2.0, 在config.php中配置 404地址,即可: 'TMPL_EXCEPTION_FILE' => './Application/Home/View/ ...
- 网站设置404页面 --nginx
有的时候根据域名要先知道用的什么web 服务器 最简单的 http://tool.chinaz.com/pagestatus/ 输入域名,看返回的头部信息 用的那个web浏览器 下面的方法也是根据头 ...
- JavaWeb 自定义404页面
本来,Tomcat中自定义404页面不过是在web.xml文件中写4行代码的事情. 直接引用 Tomcat官方FAQ 怎样自定义404页面? 编辑web.xml <error-page> ...
随机推荐
- Java简单示例-用户登录、单个页面的增删改查及简单分页
index.html -登录->stulist.jsp (index.html传递到LoginServlet,进行登录检测及写入session,NO返回index.html界面,OK 跳转到s ...
- css清楚浮动的方法
- Android接入支付宝和银联
支付宝接入参考链接:https://software.intel.com/zh-cn/node/542608 银联接入参考链接:http://blog.csdn.net/gf771115/articl ...
- JVM Management API
JVM本身提供了一组管理的API,通过该API,我们可以获取得到JVM内部主要运行信息,包括内存各代的数据.JVM当前所有线程及其栈相关信 息等等.各种JDK自带的剖析工具,包括jps.jstack. ...
- 最大公共字串LCS问题(阿里巴巴)
给定两个串,均由最小字母组成.求这两个串的最大公共字串LCS(Longest Common Substring). 使用动态规划解决. #include <iostream> #inclu ...
- 常见的web容器与应用程序服务器区别及对比
tomcat 类型:servlet容器和HTTP web服务器 功能:实现了一些J2EE特性包括Java Servlet.JSP页面.Java EL和websocket,还有纯java的http we ...
- Android之layout_gravity与gravity解析
相信layout_gravity和gravity这两个属性一直困扰着很多人,很多初学者都分不清这两个属性有什么区别,以及怎样区分它们.它们中,有一个表示的是一个控件在父布局中的位置,而另一个表示的是一 ...
- MySQL Cluster 7.3.5 集群配置参数优化(优化篇)
按照前面的教程:MySQL Cluster 7.3.5 集群配置实例(入门篇),可快速搭建起基础版的MySQL Cluster集群,但是在生成环境中,还是有很多问题的,即配置参数需要优化下, 当前生产 ...
- C和指针 第六章 数组名与指针
指针的算术运算符是指针和数组之间的一种关联,但不是唯一关联: 可以使用数组名作为指向数组第一个元素的指针,但是不可以给数组名赋新的值. //如下声明a int a[10]; //用a作为指向数组第一个 ...
- PHP setcookie() 函数
语法 setcookie(name,value,expire,path,domain,secure): name 必需.规定 cookie 的名称. value 必需.规定 cookie 的值. ex ...