发布于:2022-12-12 10:26 阅读次数:452 作者:云码素材 分类:技术分享 关键词:loading加载
只需添加几行代码,就可以加强浏览者的体验,不在等待页面加载时感到枯燥,从而关闭网页,很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程,加载完成后提示消失,大部分都应用在网站的首页。当然网上很多教程这个只是参考!
html内的代码:
<div class="loading"></div>
css代码:
.loading{ width: 300px; height: 300px; border:1px solid black; position: relative; } .loading::before,.loading::after{ content: ''; position: absolute; width: 0px; height: 0px; background: black; border-radius: 50%; top:0; bottom: 0; left: 0; right: 0; margin: auto; /*上下左右都为0,再加上margin:auto; 就是自动居中*/ animation: s 1.5s linear infinite; /*加上s状态,状态开始到结束为1.5s*/ } .loading::after{ animation-delay: 0.75s; /*第二个圆出现的时间*/ } @keyframes s{ 0%{ /*初始状态*/ width: 0px; height: 0px; opacity: 1; /*透明度*/ } 100%{ /*结束状态*/ width: 100px; height: 100px; opacity: 0; } }
我要加群:资源共享的时代,不要再单打独斗!加小编微信号加入群:xnynews(备注:云码素材入群),qq群号:202498279,一起技术学习,资源分享!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
热门标签
推荐模板
Light Year Admin后台模板 v4 iframe版本 基于Bootstrap 4.4.1
2024-10-20 22:57 浏览:21
html清爽ui设计作品集展示网站模板 响应式宣传网页制作代码模板
2024-09-23 10:12 浏览:235
热门文章
2022-05-10 08:48 浏览:30990
2Tik Tok 深田咏美抖音视频100+合集资源免费下载【绿色】
2022-10-31 08:42 浏览:29614
2022-03-27 09:29 浏览:15685
2022-09-11 15:02 浏览:12807
2020-04-13 15:31 浏览:11967
6免费使用chatgpt3种方式 chatgpt国内入口无需梯子
2023-04-23 17:52 浏览:10677
2022-09-08 10:28 浏览:9335
8三个开源的php论坛bbs源码 可自建 圈子 帖子社区网站!
2020-09-15 21:34 浏览:9322
2022-04-13 14:31 浏览:9177
2019-08-28 17:28 浏览:8647