案例的结构是非常的简单，就是用八个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制作莲花开放