css3立体效果404页面_网站常用

内容介绍

css3立体效果404页面，当然，css3的立体效果自然是不支持IE678的，这没办法，如果考虑兼容性的话，这样的css3立体效果404页面是不能用了。不过作为css3的学习资料还是不错的。
这个css3立体效果主要是利用了css3属性text-shadow:这个属性。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3立体效果404页面 - B5教程网</title>
<meta name="keywords" content="404页面,css3,css3立体" />
<meta name="description" content="css3立体效果404页面" />

.page404 .f404{
  text-align: center;
  font-size: 150px;
  font-weight: bold;
  line-height: 100px;
  letter-spacing: 5px;
  color: #fff;
  margin-bottom:60px;
}

.page404 .f404 span {
  cursor: pointer;
  text-shadow: 0px 0px 2px #686868,
    0px 1px 1px #ddd,
    0px 2px 1px #d6d6d6,
    0px 3px 1px #ccc,
    0px 4px 1px #c5c5c5,
    0px 5px 1px #c1c1c1,
    0px 6px 1px #bbb,
    0px 7px 1px #777,
    0px 8px 3px rgba(100, 100, 100, 0.4),
    0px 9px 5px rgba(100, 100, 100, 0.1),
    0px 10px 7px rgba(100, 100, 100, 0.15),
    0px 11px 9px rgba(100, 100, 100, 0.2),
    0px 12px 11px rgba(100, 100, 100, 0.25),
    0px 13px 15px rgba(100, 100, 100, 0.3);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}

.page404 .f404 span:hover {
  text-shadow: 0px 0px 2px #686868,
    0px 1px 1px #fff,
    0px 2px 1px #fff,
    0px 3px 1px #fff,
    0px 4px 1px #fff,
    0px 5px 1px #fff,
    0px 6px 1px #fff,
    0px 7px 1px #777,
    0px 8px 3px #fff,
    0px 9px 5px #fff,
    0px 10px 7px #fff,
    0px 11px 9px #fff,
    0px 12px 11px #fff,
    0px 13px 15px #fff;
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}

.page404 .f404-des{
  text-align: center;
  color: #666;
  font-family: cursive;
  font-size: 20px;
  text-shadow: 0 1px 0 #fff;
  letter-spacing: 1px;
  line-height: 2em;
}
</style>
</head>

<body>

<div class="page404">
    <div class="f404"><span>4</span><span>0</span><span>4</span></div>
    <div class="f404-des">
    	该页面不存在(´･ω･`)<br/>
    	<a href="http://www.bcty365.com/">B5教程网</a> http://www.bcty365.com 整理
    </div>
  </div>

</body>
</html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

全站搜索

css3立体效果404页面

内容介绍

最新推荐

本周排行