作者:长春搜房-杨志玲 | 来源:互联网 | 2020-08-13 18:58
在浏览网站时经常会遇到页面“正在加载,请稍后”的情况,此时页面会出现一个圆圈一直在转动,直到加载完成。正在学习html和CSS的小伙伴,你会用html和CSS实现页面加载动画效果吗?这篇文章就和大家一起研究CSS3页面加载loading动画,并将页面加载动画的代码分享给大家,感兴趣的小伙伴可以参考借鉴一下。
在浏览网站时经常会遇到页面“正在加载,请稍后”的情况,此时页面会出现一个圆圈一直在转动,直到加载完成。正在学习html和CSS的小伙伴,你会用html和CSS实现页面加载动画效果吗?这篇文章就和大家一起研究CSS3页面加载loading动画,并将页面加载动画的代码分享给大家,感兴趣的小伙伴可以参考借鉴一下。
实现页面加载loading动画效果需要用到很多CSS中的属性,比如:animation动画,keyframes,border-radius圆角,border属性等等,如果有小伙伴不知道这些属性的,可以参考PHP中文网的相关手册:CSS手册 ,希望对你有所帮助。
以下是如何用HTML和CSS3实现页面加载(loading)动画效果实例详解:
HTML部分
创建一个div用于显示加载动画,并给div一个class类名,便于对其进行样式设置,(如果样式不多也可以在标签内设置样式)具体代码如下:
CSS加载样式
CSS部分
页面的基本框架已经有了,现在还需要用CSS对其进行样式设置,设置div的长和高为120px,设置border-radius属性值为50%,将其变为圆形,用 border-top和border-bottom设置上下两个弧形,便于后面的动画设置。
最后,为了使其旋转起来,需要用animation和@keyframes属性,具体代码如下:
注意:使用animation和@keyframes动画时,注意浏览器的兼容性。(比如加前缀 -webkit- 和 -ms- )
.load {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
border-bottom: 16px solid blue;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
loading效果效果图:
3. bootstrap教程
以上就是如何用html和CSS实现页面加载loading动画效果的详细内容,更多请关注 第一PHP社区 其它相关文章!