CSS3制作莲花开放特效

使用纯CSS3代码制作了一个莲花开放的效果,在这个案例中,最关键之处是莲花开放的八个花瓣开放时的时间配合与旋转角度的配合。

HTML代码:

  1. <section class="demo">   
  2.   <div class="box">   
  3.      <div class="leaf"></div>   
  4.      <div class="leaf"></div>   
  5.      <div class="leaf"></div>   
  6.      <div class="leaf"></div>   
  7.      <div class="leaf"></div>   
  8.      <div class="leaf"></div>   
  9.      <div class="leaf"></div>   
  10.      <div class="leaf"></div>   
  11.   </div>   
  12. </section> 

CSS代码:

  1. body { 
  2.    background-color#d4d4d4
  3. }       
  4.  
  5. .demo { 
  6.    margin40px auto
  7.    width500px
  8. /*莲花花瓣的容器*/ 
  9. .box { 
  10.    positionrelative;/*设置相对定位,因为花瓣都要进行绝对定位*/    
  11.    height400px
  12. /*花瓣进行绝对定位*/ 
  13. .box .leaf { 
  14.    positionabsolute
  15. /*绘制莲花花瓣*/ 
  16. .leaf { 
  17.    margin-top400px
  18.    width300px
  19.    height300px
  20.    border-radius: 300px 0px;/*制作花瓣角*/ 
  21.    background: -*-linear-gradient(45deg,  rgba(188,190,192,18%,rgba(158,31,99,130%,rgba(158,31,99,1100%);/*制作花瓣颜色*/ 
  22.    opacity: 0.5
  23.    filter:alpha(opacity=50); 
  24.    transform: rotate(45deg);/*花瓣旋转45deg*/ 
  25.    transform-origin:  top right;/*重置花瓣旋转原点,这个很重要*/ 

上面的代码主要是一些基本样式,以及CSS3制作的莲花花瓣图。花瓣图的关键就是花瓣角和花瓣颜色的制作。

  1. @keyframes show-2 { 
  2.     0% { 
  3.      transform: rotate(45deg); 
  4.     } 
  5.     100% { 
  6.      transform: rotate(71deg); 
  7.     } 
  8. @keyframes show-3 { 
  9.     0% { 
  10.      transform: rotate(45deg); 
  11.     } 
  12.     100% { 
  13.      transform: rotate(96deg); 
  14.     } 
  15. @keyframes show-4 { 
  16.     0% { 
  17.      transform: rotate(45deg); 
  18.     } 
  19.     100% { 
  20.      transform: rotate(123deg); 
  21.     } 
  22. @keyframes show-5 { 
  23.     0% { 
  24.      transform: rotate(45deg); 
  25.     } 
  26.     100% { 
  27.      transform: rotate(149deg); 
  28.     } 
  29. @keyframes show-6 { 
  30.     0% { 
  31.      transform: rotate(45deg); 
  32.     } 
  33.     100% { 
  34.      transform: rotate(175deg); 
  35.     } 
  36. @keyframes show-7 { 
  37.     0% { 
  38.      transform: rotate(45deg); 
  39.     } 
  40.     100% { 
  41.      transform: rotate(200deg); 
  42.     } 
  43. @keyframes show-8 { 
  44.     0% { 
  45.      transform: rotate(45deg); 
  46.     } 
  47.     100% { 
  48.      transform: rotate(225deg); 
  49.     } 
  50. }  

上面这部分代码很重要的哟,因为我们莲花开花的效果就依靠这些代码来实现,分给制作了八个花瓣旋转的动画效果,从而模仿出开花的效果。一个transform并不难,难得是和下面的时间点配合:

  1. .leaf:nth-child(2) { 
  2.   animation: show-2 5s ease-in-out infinite; 
  3. .leaf:nth-child(3) { 
  4.   animation: show-3 5s ease-in-out infinite; 
  5. .leaf:nth-child(4) { 
  6.   animation: show-4 5s ease-in-out infinite; 
  7. .leaf:nth-child(5) { 
  8.   animation: show-5 5s ease-in-out infinite; 
  9. .leaf:nth-child(6) { 
  10.   animation: show-6 5s ease-in-out infinite; 
  11. .leaf:nth-child(7) { 
  12.   animation: show-7 5s ease-in-out infinite; 
  13. .leaf:nth-child(8) { 
  14.   animation: show-8 5s ease-in-out infinite; 

通过CSS3的“:nth-child()”选择器,为每个花瓣调用自己对应的动画效果。这样一来莲花开放的效果就完成了。

转载请注明:代码家园 » CSS3制作莲花开放特效

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)