最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

CSS3制作莲花开放

CSS3 有客 1153浏览 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;

}

转载请注明:有客帮 » CSS3制作莲花开放

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址