当前位置：首页 > CMS教程 > 详细页面

CSS3实现莲花绽放的动画效果

时间：2020-11-07来源：www.pcxitongcheng.com作者：电脑系统城

先来看效果：

这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实现9片花瓣。效果的叠加而已。

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13 <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 class="leaf"></div>
</div>
</section>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150 View Code
body {
background-color: #000;
}

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

@keyframes show-2 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(45deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes show-3 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(65deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes show-4 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(85deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes show-5 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(105deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes show-6 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(165deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes show-7 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(185deg);
}
100%{
transform: rotate(135deg);
}
}
@keyframes show-8 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(205deg);
}
100%{
transform: rotate(135deg);
}
}

@keyframes show-9 {
0% {
transform: rotate(135deg);
}
50% {
transform: rotate(225deg);
}
100%{
transform: rotate(135deg);
}
}

.leaf:nth-child(1) {
background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
}
.leaf:nth-child(2) {
animation: show-2 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
animation: show-3 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
animation: show-4 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
animation: show-5 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
animation: show-6 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
animation: show-7 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
animation: show-8 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
animation: show-9 6s ease-in-out infinite;
}

View Code 
body {
   background-color: #000;
}

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

@keyframes show-2 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(45deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-3 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(65deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-4 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(85deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-5 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(105deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-6 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(165deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-7 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(185deg);
    }
    100%{
     transform: rotate(135deg);
    }
}
@keyframes show-8 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(205deg);
    }
    100%{
     transform: rotate(135deg);
    }
}

@keyframes show-9 {
    0% {
     transform: rotate(135deg);
    }
    50% {
     transform: rotate(225deg);
    }
    100%{
     transform: rotate(135deg);
    }
}

.leaf:nth-child(1) {
 background: -moz-linear-gradient(45deg,rgba(250,250,250,1) 8%,rgba(158,31,99,1) 30%,rgba(158,31,99,1) 100%);/*制作花瓣颜色*/
}
.leaf:nth-child(2) {
  animation: show-2 6s ease-in-out infinite;
}
.leaf:nth-child(3) {
  animation: show-3 6s ease-in-out infinite;
}
.leaf:nth-child(4) {
  animation: show-4 6s ease-in-out infinite;
}
.leaf:nth-child(5) {
  animation: show-5 6s ease-in-out infinite;
}
.leaf:nth-child(6) {
  animation: show-6 6s ease-in-out infinite;
}
.leaf:nth-child(7) {
  animation: show-7 6s ease-in-out infinite;
}
.leaf:nth-child(8) {
  animation: show-8 6s ease-in-out infinite;
}
.leaf:nth-child(9) {
  animation: show-9 6s ease-in-out infinite;
}

CSS3实现莲花绽放的动画效果

相关信息

热门系统总排行

装机必备

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载