CSS3制作莲花开放

2722

2013 - 05 - 26 0 条评论

案例的结构是非常的简单，就是用八个div当作莲花的八个花瓣;

<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>  
</section>

这里所用到的CSS3知识点并不复杂，只是要对他的概念了解清楚。特别是动画属性animation里的每个属性值的概念，因为你没有理解清楚他们的概念你就无法配置好时间节点。接下来我们一起简单看看吧：

body {
   background-color: #d4d4d4;
}      

.demo {
   margin: 40px auto;
   width: 500px;
}
/*莲花花瓣的容器*/
.box {
   position: relative;/*设置相对定位，因为花瓣都要进行绝对定位*/   
   height: 400px;
}
/*花瓣进行绝对定位*/
.box .leaf {
   position: absolute;
}
/*绘制莲花花瓣*/
.leaf {
   margin-top: 400px;
   width: 300px;
   height: 300px;
   border-radius: 300px 0px;/*制作花瓣角*/
   background: -*-linear-gradient(45deg,  rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
   opacity: 0.5;
   filter:alpha(opacity=50);
   transform: rotate(45deg);/*花瓣旋转45deg*/
   transform-origin:  top right;/*重置花瓣旋转原点，这个很重要*/
}

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

@keyframes show-2 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(71deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(96deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(123deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(149deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(175deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(200deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(225deg);
    }
}

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

.leaf:nth-child(2) {
  animation: show-2 5s ease-in-out infinite;
}
.leaf:nth-child(3) {
  animation: show-3 5s ease-in-out infinite;
}
.leaf:nth-child(4) {
  animation: show-4 5s ease-in-out infinite;
}
.leaf:nth-child(5) {
  animation: show-5 5s ease-in-out infinite;
}
.leaf:nth-child(6) {
  animation: show-6 5s ease-in-out infinite;
}
.leaf:nth-child(7) {
  animation: show-7 5s ease-in-out infinite;
}
.leaf:nth-child(8) {
  animation: show-8 5s ease-in-out infinite;
}

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

下面是所有CSS代码

body {
   background-color: #d4d4d4;
}      

.demo {
   margin: 40px auto;
   width: 500px;
}
/*莲花花瓣的容器*/
.box {
   position: relative;/*设置相对定位，因为花瓣都要进行绝对定位*/   
   height: 400px;
}
/*花瓣进行绝对定位*/
.box .leaf {
   position: absolute;
}
/*绘制莲花花瓣*/
.leaf {
   margin-top: 400px;
   width: 300px;
   height: 300px;
   border-radius: 300px 0px;/*制作花瓣角*/
   background: -*-linear-gradient(45deg,  rgba(188,190,192,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
   opacity: 0.5;
   filter:alpha(opacity=50);
   transform: rotate(45deg);/*花瓣旋转45deg*/
   transform-origin:  top right;/*重置花瓣旋转原点，这个很重要*/
}
@keyframes show-2 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(71deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(96deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(123deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(149deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(175deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(200deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(45deg);
    }
    100% {
     transform: rotate(225deg);
    }
}  
.leaf:nth-child(2) {
  animation: show-2 5s ease-in-out infinite;
}
.leaf:nth-child(3) {
  animation: show-3 5s ease-in-out infinite;
}
.leaf:nth-child(4) {
  animation: show-4 5s ease-in-out infinite;
}
.leaf:nth-child(5) {
  animation: show-5 5s ease-in-out infinite;
}
.leaf:nth-child(6) {
  animation: show-6 5s ease-in-out infinite;
}
.leaf:nth-child(7) {
  animation: show-7 5s ease-in-out infinite;
}
.leaf:nth-child(8) {
  animation: show-8 5s ease-in-out infinite;
}