HTML+CSS实现页面加载（loading）动画效果

web前端|css教程 HTML+CSS实现页面加载（loading）动画效果

HTML,CSS,加载动画

web前端-css教程

大家在浏览页面时有没有遇到页面正在loading（加载）的情况，那作为一个前端开发人员，你知道如何用CSS3和HTML制作页面加载动画效果吗？这篇文章就和大家分享一个超级简单实用的CSS3 圆圈加载（loading）动画效果的代码，有一定的参考价值，感兴趣的朋友可以看看。

早教网站源码,vscode扩展服务器运行,ubuntu不兼容,tomcat配置发布目录,网络爬虫黄牛,php 自带缓存,仙桃产品seo推广都有哪些渠道,网站后台不显示验证码lzw

想要实现loading加载动画需要用到很多CSS3中的属性和HTML标签，比如：animation动画，display，border-radius圆角，transform属性等等，如有不清楚的小伙伴可以看看我以前的文章，之前都有介绍过，或者访问 CSS3视频教学。

网页播放视频源码,ubuntu加中文语言,tomcat8w启动报错,python爬虫代码网站,PHP开发运行环境搭建实验,seo in chinlzw

实例示范：用三个圆圈制作一个页面加载动画效果，圆圈由隐藏变为出现再变为隐藏，具体代码如下：

php jymusic音乐源码,ubuntu界面偏左,注册表没有tomcat,爬虫入门项目,php svn服务器搭建,SEO中mc推广是什么意思lzw

HTML部分：

CSS3部分：

.spinner {     margin: 100px auto 0;     width: 150px;     text-align: center;   }       .spinner > div {     width: 30px;     height: 30px;     background-color: #67CF22;         border-radius: 100%;     display: inline-block;     -webkit-animation: bouncedelay 1.4s infinite ease-in-out;     animation: bouncedelay 1.4s infinite ease-in-out;     /* Prevent first frame from flickering when animation starts */     -webkit-animation-fill-mode: both;     animation-fill-mode: both;   }       .spinner .bounce1 {     -webkit-animation-delay: -0.32s;     animation-delay: -0.32s;   }       .spinner .bounce2 {     -webkit-animation-delay: -0.16s;     animation-delay: -0.16s;   }       @-webkit-keyframes bouncedelay {     0%, 80%, 100% { -webkit-transform: scale(0.0) }     40% { -webkit-transform: scale(1.0) }   }       @keyframes bouncedelay {     0%, 80%, 100% {       transform: scale(0.0);       -webkit-transform: scale(0.0);     } 40% {       transform: scale(1.0);       -webkit-transform: scale(1.0);     }   }

效果如图所示：

HTML+CSS实现页面加载（loading）动画效果

以上介绍了CSS3实现页面loading加载动画效果的方法，项目中用的比较多，可以直接拿过去使用，也可以修改成自己喜欢的样式，希望这篇文章对你有所帮助！

【相关教学推荐】

1. HTML视频教学
2. CSS3在线手册
3. bootstrap教学

加载动画