蓝色扁平化css3 loading加载动画特效
稿源: 原创
这是一款css3属性制作loading加载动画,实用的加载图标动画特效。
使用方法
在页面引入以下HTML结构文件
<section> <div class='sk-rotating-plane'></div> </section> <!-- / 2 --> <section> <div class='sk-double-bounce'> <div class='sk-child sk-double-bounce-1'></div> <div class='sk-child sk-double-bounce-2'></div> </div> </section> <!-- / 3 --> <section> <div class='sk-wave'> <div class='sk-rect sk-rect-1'></div> <div class='sk-rect sk-rect-2'></div> <div class='sk-rect sk-rect-3'></div> <div class='sk-rect sk-rect-4'></div> <div class='sk-rect sk-rect-5'></div> </div> </section> <!-- / 4 --> <section> <div class='sk-wandering-cubes'> <div class='sk-cube sk-cube-1'></div> <div class='sk-cube sk-cube-2'></div> </div> </section> <!-- / 5 --> <section> <div class='sk-spinner sk-spinner-pulse'></div> </section> <!-- / 6 --> <section> <div class='sk-chasing-dots'> <div class='sk-child sk-dot-1'></div> <div class='sk-child sk-dot-2'></div> </div> </section> <!-- / 7 --> <section> <div class='sk-three-bounce'> <div class='sk-bounce-1 sk-child'></div> <div class='sk-bounce-2 sk-child'></div> <div class='sk-bounce-3 sk-child'></div> </div> </section> <!-- / 8 --> <section> <div class='sk-circle-bounce'> <div class='sk-child sk-circle-1'></div> <div class='sk-child sk-circle-2'></div> <div class='sk-child sk-circle-3'></div> <div class='sk-child sk-circle-4'></div> <div class='sk-child sk-circle-5'></div> <div class='sk-child sk-circle-6'></div> <div class='sk-child sk-circle-7'></div> <div class='sk-child sk-circle-8'></div> <div class='sk-child sk-circle-9'></div> <div class='sk-child sk-circle-10'></div> <div class='sk-child sk-circle-11'></div> <div class='sk-child sk-circle-12'></div> </div> </section> <!-- / 9 --> <section> <div class='sk-cube-grid'> <div class='sk-cube sk-cube-1'></div> <div class='sk-cube sk-cube-2'></div> <div class='sk-cube sk-cube-3'></div> <div class='sk-cube sk-cube-4'></div> <div class='sk-cube sk-cube-5'></div> <div class='sk-cube sk-cube-6'></div> <div class='sk-cube sk-cube-7'></div> <div class='sk-cube sk-cube-8'></div> <div class='sk-cube sk-cube-9'></div> </div> </section> <!-- / 10 --> <section> <div class='sk-fading-circle'> <div class='sk-circle sk-circle-1'></div> <div class='sk-circle sk-circle-2'></div> <div class='sk-circle sk-circle-3'></div> <div class='sk-circle sk-circle-4'></div> <div class='sk-circle sk-circle-5'></div> <div class='sk-circle sk-circle-6'></div> <div class='sk-circle sk-circle-7'></div> <div class='sk-circle sk-circle-8'></div> <div class='sk-circle sk-circle-9'></div> <div class='sk-circle sk-circle-10'></div> <div class='sk-circle sk-circle-11'></div> <div class='sk-circle sk-circle-12'></div> </div> </section> <!-- / 11 --> <section> <div class='sk-folding-cube'> <div class='sk-cube sk-cube-1'></div> <div class='sk-cube sk-cube-2'></div> <div class='sk-cube sk-cube-4'></div> <div class='sk-cube sk-cube-3'></div> </div> </section> <section></section>
相关插件