网站打开时添加圆形加载动画优知新10个月前发布关注私信0380 ------正文内容展示，开始汲取新知识啦------ 浏览网页时，难免会有网页加载慢的情况，当网页长时间未加载完毕时，可以显示一些动画效果，以避免网页长时间空白。本实例实现的是圆形加载动画，当页面加载完成时，页面中的弧形会一直在页面中转动，具体运行效果如下图所示： 本实例主要结合使用css3中的边框属性和动画属性实现圆形加载动画。为<div>标签添加边框，可通过border属性可实现。其使用语法如下： border: border-color border-style border-width //border-color：设置边框颜色。 //border-style：设置边框样式。 //border-width：设置边框宽度。 需要说明的是，上面三个属性值可以在一行里设置，也可单独设置，例如，单独设置边框颜色的语法为 border-color：color 当然若以上三个属性在一行里设置时，表示设置标签的四条边框的样式相同， 同样，我们可以单独设置某一条边框的样式，例如，单独设置上边框的样式，其语法为： Border-top: border-color border-style border-width <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆形加载动画</title> <style> .box { text-align: center; width: 300px; height: 200px; margin: 20px auto; } .box>span { animation: loader 1000ms infinite linear; border-radius: 100%; border: 6px solid #2dbb55; border-left-color: transparent; color: transparent; display: inline-block; line-height: 1.2; width: 50px; height: 50px; } @keyframes loader { 0% { transform: rotate(0deg); } 100% {transform: rotate(360deg);} } </style> </head> <body> <div class="box"><span></span></div> </body> </html> 温馨提示：本文最后更新于2023-12-19 14:50:26，某些文章具有时效性，若有错误或已失效，请私信客服或联系知新社长。------本文内容已结束，喜欢请分享------ 感谢您的访问，Ctrl+D收藏本站吧。 © 版权声明 相关声明 1、本站名称：知新网 2、本站永久网址：https://www.uzhix.com 3、本站部分内容源于网络和用户投稿，仅供学习与参考，如有侵权，请联系站长进行删除处理。 4、用户评论和发布内容，并不代表本站赞同其观点和对其真实性负责。 5、本站禁止以任何方式发布或转载任何违法的相关信息。 6、资源大多存储在云盘，如发现链接失效，请联系我们替换更新。 三月 28 知岛上的今时往日 2023：云海解析4.5.1视频解析计费系统绿豆二开修正版JSON一次解析计费系统源码 (3)2023：2023最新站长必备在线工具箱系统源码 含上百款工具 带后台版本 自适应模板 优化修复版 (0)2023：网站SEO报告和代码工具平台系统源码 (0)2023：智慧停车场微信小程序源码智能停车系统源码全开源 (0)2023：手机卡流量卡 号卡推广HTML单页源码（带弹窗） (0) THE END教程之家知识/课程/教育# CSS代码# JS代码# 网站美化 点赞0投币 分享QQ空间微博QQ好友海报分享复制链接收藏
