<li id="jut4n"></li>

當前位置：首頁 > CMS教程 > 詳細頁面

CSS3實現蓮花綻放的動畫效果

時間：2020-11-07來源：www.ship-models.net作者：電腦系統城

先來看效果：

這效果看起來挺炫，但原理并不復雜，能實現一片花瓣動起來，就能實現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實現蓮花綻放得動畫效果的詳細內容

相關信息

2020-11-05
dedecms系統安全設置防止入侵,掛馬的基本安全操作方法
2020-11-04
dedecms織夢php7+刪除不了后臺欄目的解決方法
2020-11-04
dedecms php7以上版本備份數據還原不出來正常數據的解決方法

nginx/Apache/IIS開啟目錄瀏覽功能
nginx/Apache/IIS開啟目錄瀏覽功能...

2020-11-02
wdcp計劃任務導致wdcp面板無法訪問解決辦法
wdcp計劃任務導致wdcp面板無法訪問解決辦法...

2020-11-02

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

淑芬两腿间又痒了