CSS3 制作绽放的莲花

CSS3 制作绽放的莲花

这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实现9片花瓣。效果的叠加而已。

HTML：

 <  section   class  ="demo"  >   
   <  div   class  ="box"  >   
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >  
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >   
      <  div   class  ="leaf"  ></  div  >   
   </  div  >   
 </  section  > 

 CSS：

View Code

演示：

 

 

 

标签:  css3

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于CSS3 制作绽放的莲花的详细内容...

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