CSS3实现loading动画效果_html/css_WEB-ITnose

前几篇介绍了CSS3的3个动画属性transform，transition，animation。但即使基本语法能看懂，也不代表能设计出棒棒的动画效果。在设计这条路上，是学无止境，甚至需要拼天赋的。我也很菜，只能站在优秀的设计师的肩膀上，模拟出一些效果。

参照网上的设计，本篇分享一下非常常见的Loading的效果。你可以点这里

例子1：菊花状的Loading效果

第一步画出静态的小菊花。

.sk-fading-circle {  width: 40px;  height: 40px;  position: relative;}.sk-fading-circle .sk-circle {  width: 100%;  height: 100%;  position: absolute;  left: 0;  top: 0;}.sk-fading-circle .sk-circle:before {  content: '';  display: block;  margin: 0 auto;  width: 15%;  height: 15%;  background-color: #333;  border-radius: 100%;}
  


      
查看更多关于CSS3实现loading动画效果_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did115057