css3立体效果404页面

编辑：橙子来源：转载时间：2021-10-31 阅读：次

css3立体效果404页面，当然，css3的立体效果自然是不支持IE678的，这没办法，不过作为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页面的制作思路非常有借鉴意义，本站的404页面就是这个，演示地址：https://www.chenningtao.cn/404
html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3立体效果404页面 </title>
<meta name="keywords" content="404页面,css3,css3立体" />
<meta name="description" content="css3立体效果404页面" />
<meta name="Copyright" content="Copyright " />
<style>
body {
  background-color: #ECECEC;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #3c3c3c;
  padding:150px;
}
.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">
    	该页面不存在(&acute;&#65381;ω&#65381;`)<br/>
    	<a href="/">返回首页</a> 
    </div>
  </div>
</body>
</html>

css3立体效果404页面

使用JavaScript实现网页的白天黑夜模式

JS根据不通的域名显示不同的备案号和内容

网站美化 – 复制提醒和禁用F12以及右键菜单提醒代码美化版

给网站外链添加GO跳转提示代码

为你的网站部署jQuery.lazyload插件实现图片延迟加载

给网站文章标题链接添加“加载中”提示的办法