正文 首页技术分享

自适应404页面特效

枫叶

HTML+CSS自适应404页面特效源码

演示图片

007X8olVly1g7dj5mfw0qj30dw08mmx9.jpg

demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>错误提示-页面未找到</title>
<style type="text/css">
<!--
body{height: 80vh;display:flex;background-color:#222a30;flex-direction:column;align-items:center;justify-content:center;}
.min,.mini{color:#fff;text-indent:12px;letter-spacing:12px;font-size:100px;font-family:Cabin,sans-serif;-webkit-animation:colorText 5s ease-out infinite,nudgeText 5s ease-out infinite;animation:colorText 5s ease-out infinite,nudgeText 5s ease-out infinite;}
.mini{font-size:14px;}
.btn{display:inline-block;margin-top:50px;padding:5px 10px;border:1px solid #fff;color:#fff;text-decoration:none;}
@-webkit-keyframes colorText{21%{color:#4e5559;}
30%{color:#fff;}
51%{color:#4e5559;}
60%{color:#fff;}
81%{color:#4e5559;}
90%{color:#fff;}
}
@keyframes colorText{21%{color:#4e5559;}
30%{color:#fff;}
51%{color:#4e5559;}
60%{color:#fff;}
81%{color:#4e5559;}
90%{color:#fff;}
}
-->
</style>
</head>
<body>
<div>404</div>
<div>御风而行,踏破天穹</div>
<a href="javascript:history.back(-1);">返回首页</a>
</body>
</html>