给网页添加载入封面效果
大概的效果就是，当访客访问你的网页博客时，页面会首先显示一张全屏大图，然后再逐渐显示网页内容，代码是通过CSS3动画控制的效果，所以很轻量，但是兼容浏览器没有JS的全面。
代码食用
- header内添加CSS（ 不要放入css文件内)
<br>.loading{<br>opacity:
0;<br>background:#fff url(<a href="https://ae01.alicdn.com/kf/U98aec3a00998414baf94c8f2316da986Z.jpg)" target="_blank">https://ae01.alicdn.com/kf/U98aec3a00998414baf94c8f2316da986Z.jpg)</a>;<br>background-position:center center;<br>-webkit-background-size:cover;<br>-moz-background-size:cover;<br>-o-background-size:cover;<br>background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}<br>@keyframes Loading<br>{<br>0% {opacity:1;color:#C1FF50;z-index:999999;}<br>20% {opacity:1;color:#5CB8FF;}<br>40% {opacity:1;color:#FFD350;}<br>60% {opacity:1;color:#FF5950;}<br>80% {opacity:.5;color:#fff;}<br>100% {opacity:0;}<br>}<br>
DIV引用Loading...
演示效果
看本篇文章打开效果
结语
感谢访问强仔博客，希望本文对你有所帮助！
.loadingqz{opacity:0;background:#fff url(https://ae01.alicdn.com/kf/U98aec3a00998414baf94c8f2316da986Z.jpg); background-position:center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;position:fixed;width:100%;top:0;bottom:0;animation:loadingqz 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;} @keyframes loadingqz { 0% {opacity:1;color:#C1FF50;z-index:999999;} 20% {opacity:1;color:#5CB8FF;} 40% {opacity:1;color:#FFD350;} 60% {opacity:1;color:#FF5950;} 80% {opacity:.5;color:#fff;} 100% {opacity:0;} } 本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-11-291，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
