系統城裝機大師 - 唯一官網：www.farandoo.com！

打印機 |投影機 |數據庫 |CMS教程 |服務器設置 |網頁制作 |網絡編程 | 腳本專欄 |重裝教程 | 如何安裝系統？ |
網站導航

系統下載

Win10系統 Win8系統 Win7系統 WinXP系統 路由器

軟件下載

電腦軟件 安卓軟件 安卓應用 安卓游戲

文章資訊

IT資訊 系統教程 軟件教程 U盤教程 系統幫助

系統相關

系統主題 Win10激活工具 Win8激活工具 Win7激活工具

專題合集

軟件合集 教程專題 安卓推薦
電腦配置
配置清單 品牌機 組裝機 一體機 筆記本
軟件
  • 軟件
  • 文章
  • 安卓
搜 索

熱搜：番茄花園 電腦公司 蘿卜家園 深度技術 雨林木風

首頁 XP系統 Win7系統 Win10系統 win11系統 在線裝機 U盤啟動 系統教程 IT資訊
Win8系統 Linux系統 Server系統 MacOS系統 U PE教程 重裝大師 裝機精靈 網絡知識 bios設置 電腦配置
當前位置：首頁 > CMS教程 > 詳細頁面

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

時間：2020-11-07來源：www.farandoo.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;
}

以上就是CSS3實現蓮花綻放得動畫效果的詳細內容

分享到：

相關信息

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

熱門系統總排行

裝機必備

系統教程欄目

Win10教程 重裝大師 重裝教程 bios 其它教程 系統幫助 蘋果MAC教程 Linux教程 Win2003教程 Win2008教程 U盤教程 WinXP教程 Win7教程 Win8教程 軟件教程 win11教程 打印機

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

軟件發布| Tag標簽| 版權聲明| 網站地圖| 軟件專題| sitemap| 系統城一鍵重裝系統QQ群

本站發布的系統與軟件僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。

皖ICP備11004271號-6版權所有：固鎮縣祥瑞電腦科技銷售部

jlzzjlzz亚洲乱熟在线播放