家好，本篇文章分享经典Loading加载缩放动画特效，欢迎参考和指正。

效果图：

HTML代码：

<div class="tui-demo-5">
 <div class="tui-1"></div>
 <div class="tui-2"></div>
 <div class="tui-3"></div>
</div>

CSS代码：

<style type="text/css">
 .tui-demo-5 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 }
 .tui-demo-5 div {
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: #2eefe6;
 animation: tui-demo-5 0.4s infinite alternate;
 }
 .tui-demo-5 .tui-1 {
 animation-delay: -0.4s;
 }
 .tui-demo-5 .tui-2 {
 animation-delay: -0.2s;
 }
 .tui-demo-5 .tui-3 {
 animation-delay: 0s;
 }
 @keyframes tui-demo-5 {
 0% {
 opacity: 1;
 transform: scale(1);
 }
 100% {
 opacity: 0.4;
 transform: scale(0.6);
 }
 }
</style>

知识点：

animation：是CSS3的动画属性，这里把animation绑定到tui-demo-5元素上，并指定该动画需要0.4秒完成，infinite则表示无限次播放该动画，alternate则表示动画会在奇数次数正常播放，而在偶数次数向后播放，animation-delay则表示动画在启动前的延迟间隔。

@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。scale定义2D缩放，可以配置缩放大小。opacity定义元素的不透明级别。

最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。

avascript使用document.getElementById操作div

javascript中经常会操作div，大家在网上看到的各种酷炫的前端效果，很多都是通过操作div来实现的，下面通过实例代码和注释来讲解：