HTML+CSS自适应404页面特效源码,思源转载于优梦云
<!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>