如何用html和CSS实现页面加载loading动画效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何用html和CSS实现页面加载loading动画效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1925字,纯文字阅读大概需要3分钟。
内容图文
![如何用html和CSS实现页面加载loading动画效果](/upload/InfoBanner/zyjiaocheng/411/ea01f1d38786408eab545c3a8896a5f4.jpg)
实现页面加载loading动画效果需要用到很多CSS中的属性,比如:animation动画,keyframes,border-radius圆角,border属性等等,如果有小伙伴不知道这些属性的,可以参考PHP中文网的相关手册:CSS手册 ,希望对你有所帮助。
以下是如何用HTML和CSS3实现页面加载(loading)动画效果实例详解:
HTML部分
创建一个div用于显示加载动画,并给div一个class类名,便于对其进行样式设置,(如果样式不多也可以在标签内设置样式)具体代码如下:
<body> <p style="font-size: 20px;">CSS加载样式</p> <div class="load"></div> </body>
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效果效果图:
以上给大家分享了如何用HTML和CSS3实现页面加载(loading)动画效果,详细讲解了HTML和CSS部分,比较容易理解,之前没有接触过页面加载动画的小伙伴一定要自己动手尝试,看看你的代码能不能实现页面加载的效果,希望这篇文章对你有所帮助!
【相关教程推荐】
1. CSS3最新版参考手册
2. CSS3教程
3. bootstrap教程
以上就是如何用html和CSS实现页面加载loading动画效果的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的如何用html和CSS实现页面加载loading动画效果全部内容,希望文章能够帮你解决如何用html和CSS实现页面加载loading动画效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。