玩家必看科普!麻豆人人妻人人妻人人片AV,欧美老妇交乱视频在线观看,久久综合九色综合久99_知乎

<ruby id="fgcka"></ruby>

<progress id="fgcka"></progress>

<tbody id="fgcka"></tbody>

<dd id="fgcka"></dd>

<dd id="fgcka"></dd>

<em id="fgcka"></em>

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

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

時間：2020-11-07來源：www.nowordz.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實現蓮花綻放得動畫效果的詳細內容

相關信息

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

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

玩家必看科普!麻豆人人妻人人妻人人片AV,欧美老妇交乱视频在线观看,久久综合九色综合久99_知乎人人玩人人添人人澡超碰偷拍青春娱乐视频精品分类官网2 最好最新高清中文字幕 91国自产拍最新2018 欧美精品一区二区三区不卡网深夜你懂得我的意思2021 宿舍NP乖把腿张开H 网恋奔现一天被要几次为什么我越叫他越快学渣各种各样的PLAY 英语课代表下面好软小说亚洲国产综合在线区尤物 FREE性丰满HD性欧美我年轻漂亮的继坶BD 最近中文字幕完整免费视频啦啦啦免费视频卡一卡二青柠视频在线观看大全在线天堂WWW在线资源亚洲国产日本韩国欧美MV 天天学习|久久久久久久精品国产亚洲87 国产K频道分享系统进入口三个嘴都吃满了还塞满了 JAPONENSIS老师学生JAVAHBB 亚洲精品1卡2卡3卡4卡樱花草在线社区WWW韩国好涨水快流出来了快吃动视频久久AV无码精品人妻出轨