强仔
@qiangzai

大概的效果就是,当访客访问你的网页博客时,页面会首先显示一张全屏大图,然后再逐渐显示网页内容,代码是通过CSS3动画控制的效果,所以很轻量,但是兼容浏览器没有JS的全面。

代码食用

  • header内添加CSS( 不要放入css文件内)

<style>
.loading{
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:Loading 2s;line-height:100vh;text-align:center;font-size:30px;color:#ccc;}
@keyframes Loading
{
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;}
}
</style>

  • DIV引用
    <div class="loading">Loading...</div>

演示效果

看本篇文章打开效果

结语

感谢访问强仔博客,希望本文对你有所帮助!

测试文章

本文文章字数为:125个

您阅读这篇文章共花了:

文章最后更新于:2020 年 12 月 06 日 07:41:28

当前IP为:3.236.156.34,请自觉遵守网络安全

END
上午8:47 · 2020年11月29日
277
0
0
宝贝留个言吧

教程
给网页添加载入封面效果
大概的效果就是,当访客访问你的网页博客时,页面会首先显示一张全屏大图,然后再逐渐显示网页内容,代码是通过CSS3动画控制的效果,所以很轻量,...
欢迎扫描二维码继续阅读
November 29, 2020
强仔博客
blogger
强仔
统计
文章:106 篇
分类:4 个
评论:324 条
加载耗时:18 ms
运行时长:1年145天
by yoniu.
强仔博客