效果图：
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根本入门开拓。
