css3立体效果404页面

作者：佳明妈来源：个性签名 2014-01-28 人气：

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3立体效果404页面 - 建站特效http://51xuediannao.com</title>
<meta name="keywords" content="404页面,css3,css3立体" />
<meta name="description" content="css3立体效果404页面" />
<meta name="Copyright" content="Copyright @ 懒人建站 http://51xuediannao.com" />

.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.51xuediannao.com/">懒人建站</a> http://www.51xuediannao.com 整理
    </div>
  </div>

<div style="height:auto; display:block; margin:0 auto; margin-top:100px; font-size:10pt; line-height:150%; clear:both;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站</a> 收集整理 我要学电脑.COM →www.51xuediannao.com </span><br>
<a href="http://www.51xuediannao.com">懒人建站</a> http://www.51xuediannao.com<br/>
<span>我们为您提供-
<a href="http://www.51xuediannao.com">jquery特效</a>，
<a href="http://www.51xuediannao.com/JS">JS代码</a>，
<a href="http://www.51xuediannao.com/JS/texiao">网页特效</a>，
<a href="http://www.51xuediannao.com/jiqiao/css/">CSS技巧</a>；</span>
<span>懒人建站只收录实用和能提高用户体验的代码</span>
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
<p><a href="http://www.lrjz100.com">经典语录</a></p>
</div>

</body>
</html>

css3立体效果404页面，当然，css3的立体效果自然是不支持IE678的，这没办法，如果考虑兼容性的话，这样的css3立体效果404页面是不能用了。不过作为css3的学习资料还是不错的。
这个css3立体效果主要是利用了css3属性text-shadow:这个属性。因为这个css3属性可以用逗号隔开写多个，如下：
text-shadow:
   0px 0px 2px #686868,
    0px 1px 1px #fff,
    0px 2px 1px #fff,
    0px 3px 1px #fff,
    0px 4px 1px #fff,
这样就可以模拟立体效果。
这个css3立体效果404页面的制作思路非常有借鉴意义。

↓ 查看全文

本文链接：css3立体效果404页面https://www.51xuediannao.com/js/texiao/755.html

css3立体效果404页面由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。

上一篇：网页短时间维护倒计时js代码
下一篇：html5 canvas实战刮刮卡js代码

css3立体效果404页面

css3立体效果404页面-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户

css3立体效果404页面

css3立体效果404页面-相关文章

css3立体效果404页面-最新评论

网页特效-热门文章

网页特效-推荐文章

活跃用户