前端开发者学堂 - fedev.cn

藤藤每日一练——CSS3制作莲花开放

#藤藤每日一练#animation#高级篇
发布于 藤藤

这个效果我一拿到效果，让我惊叹了一翻，使用纯CSS3代码制作了一个莲花开放的效果，藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了纯CSS3的案例。在这个案例中，最关键之处是莲花开放的八个花瓣开放时的时间配合与旋转角度的配合。藤藤为了调整这个时间，花费了不少精力。你看到这个DEMO也会像我一样惊叹。

demodownload

HTML CODE

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

CSS CODE

这里所用到的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;
}

demodownload

如需转载，烦请注明出处：https://www.fedev.cn/demo/lotus-open.html

nike free run 5.0 custom