CSS3制作莲花开放

案例的结构是非常的简单,就是用八个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;
}

文章附属文件

文件名称: 20180105115949708289.png

文件大小:61.26 KB

文件签名:824977C92A4A16B2F7A42365548FA0CE14C4E203

文件名称: 20180105115949155399.png

文件大小:82.81 KB

文件签名:016EE63320969158D35127ED20F817F838E385C4

文件名称: 20180105115950421116.png

文件大小:97.94 KB

文件签名:4F7B4B738F4CEBD5FAFA4AC5F27A193FFA2E48EC

评论列表

此文章还没有评论。