CSS動畫製作綻放的花朵

厚德博學發表於2018-02-24

CSS動畫

最近看到幾篇有關css的文章，純css實現各種複雜效果，甚至可以獲取使用者密碼併傳送到指定位置，甚是震撼。閒暇之餘，利用自己現有的css基礎，實現了本作品，同時練習一下許久不用的CSS3技能（技術分享，不考慮相容性）。

話不多說，先上動圖：

這是播放效果

看起來比較複雜，其實不然。運用的技術點如下：

轉換transform
動畫animation
漸變linear-gradient與圓角border-radius
盒子陰影box-shadow

HTML結構如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flower</title>
	<link rel="stylesheet" href="gift.css" type="text/css"/>
</head>
<body>
	<div id="flower-container">
		<div id="bg-star"></div>
		<div id="flower-outer">
			<span class="flower-outer outer1"></span>
			<span class="flower-outer outer2"></span>
			<span class="flower-outer outer3"></span>
			<span class="flower-outer outer4"></span>
			<span class="flower-outer outer5"></span>
			<span class="flower-outer outer6"></span>
			<span class="flower-outer outer7"></span>
			<span class="flower-outer outer8"></span>
			<div id="flower-center">
				<span class="flower-center center1"></span>
				<span class="flower-center center2"></span>
				<span class="flower-center center3"></span>
				<span class="flower-center center4"></span>
				<span class="flower-center center5"></span>
				<span class="flower-center center6"></span>
				<span class="flower-center center7"></span>
				<span class="flower-center center8"></span>
				<div id="flower-inner">
					<span class="flower-inner inner1"></span>
					<span class="flower-inner inner2"></span>
					<span class="flower-inner inner3"></span>
					<span class="flower-inner inner4"></span>
					<span class="flower-inner inner5"></span>
					<span class="flower-inner inner6"></span>
					<span class="flower-inner inner7"></span>
					<span class="flower-inner inner8"></span>
				</div>
			</div>
		</div>
	</div>
	
</body>
</html>
複製程式碼

.flower-container類是最大的容器，裡面兩個元素分別是星空#bg-star和花朵容器#flower-outer。由於花瓣有3層，所以#flower-outer內依次巢狀了兩層，沒錯，span元素就是花瓣，每層8個瓣。

千呼萬喚始出來，CSS程式碼馬上出來：

body{
font-size: 20px;
height: 100%;
width: 100%;
background:#000;
overflow: hidden;
}
複製程式碼

星空：

#bg-star{
top: 30%;
left: 30%;
height: 2px;
width: 2px;
position: absolute;
transform-style: preserve-3d;
box-shadow: 10em 10em yellow,
2.5em 10em white,10em 5em yellow,
20em 0em white,0em 20em white,
20em 20em white,25em 20em lightyellow,
40em 35em white,25em 40em white,
10em 50em white,60em 0em white,
5em 0em white,15em 40em yellow,
45em 30em white,30em 20em lightyellow,
35em 15em white,15em 35em yellow;
transform-origin: -10em 10em;
animation: stars 20s linear infinite;
複製程式碼

} @keyframes stars{ from{ transform: translateZ(0em) rotate(0deg);

}
to{
	transform: translateZ(80em) rotate(360deg);
}
複製程式碼

}

為了展現出立體感和距離感

#bg-star:before,#bg-star:after{
content: "";
position: absolute;
width: inherit;
height: inherit;
background-color: white;
box-shadow: inherit;
複製程式碼

}

#bg-star:before{ transform: translateZ(-100em); }

#bg-star:after{ transform: translateZ(-50em); }

最關鍵的花瓣部分

這是每層花瓣的容器（不包含星空容器）公共樣式

#flower-container div:not(:empty){
position: absolute;
top: 50%;
left: 50%;
box-sizing: border-box;
複製程式碼

}

最外層

#flower-outer{
height: inherit;
width: inherit;
margin: -12.5em 0 0 -12.5em;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateZ(20deg);
animation: outerdiv 10s linear infinite alternate;//這是外層容器的動畫
複製程式碼

}

@keyframes outerdiv{
0%{
	transform: rotateX(30deg) rotateZ(20deg);
}
100%{
	transform: rotateX(30deg) rotateZ(380deg);
}
複製程式碼

}

中層

#flower-center{
height: 18em;
width: 18em;
margin: -9em 0 0 -9em;
transform-style: preserve-3d;
transform: rotateZ(22.5deg);
複製程式碼

}

內層

#flower-inner{
height: 10em;
width: 10em;
margin: -5em 0 0 -5em;
transform-style: preserve-3d;
transform: rotateZ(-22.5deg);
複製程式碼

}

這是每層花瓣的公共樣式

外層

.flower-outer{
top: 0.5em;
height: 12em;
width: 5em;
margin-left: -1.5em;
opacity: 0.6;
複製程式碼

}

中層

.flower-center{
height: 9em;
width: 4em;
margin-left: -1em;
opacity: 0.8;
複製程式碼

}

內層

.flower-inner{
height: 5em;
width: 2.5em;
margin-left: -0.75em;
opacity: 0.9;
複製程式碼

}

下面就是各種花瓣位置調整和動畫了

.outer1{
transform: rotateZ(0deg) rotateX(-15deg);
animation: flowerouter1 2s ease-in-out 1s backwards;
複製程式碼

}

.center1{
transform: rotateZ(0deg) rotateX(-30deg);
animation: flowercenter1 3s ease-in-out 2s backwards;
複製程式碼

}

.inner1{
transform: rotateZ(0deg) rotateX(-60deg);
animation: flowerinner1 4s ease-in-out 3s backwards;
複製程式碼

}

.outer2{
transform: rotateZ(45deg) rotateX(-15deg);
animation: flowerouter2 2s ease-in-out 1s backwards;
複製程式碼

}

.center2{
transform: rotateZ(45deg) rotateX(-30deg);
animation: flowercenter2 3s ease-in-out 2s backwards;
複製程式碼

}

.inner2{
transform: rotateZ(45deg) rotateX(-60deg);
animation: flowerinner2 4s ease-in-out 3s backwards;
複製程式碼

}

.outer3{
transform: rotateZ(90deg) rotateX(-15deg);
animation: flowerouter3 2s ease-in-out 1s backwards;
複製程式碼

}

.center3{
transform: rotateZ(90deg) rotateX(-30deg);
animation: flowercenter3 3s ease-in-out 2s backwards;
複製程式碼

}

.inner3{
transform: rotateZ(90deg) rotateX(-60deg);
animation: flowerinner3 4s ease-in-out 3s backwards;
複製程式碼

}

.outer4{
transform: rotateZ(135deg) rotateX(-15deg);
animation: flowerouter4 2s ease-in-out 1s backwards;
複製程式碼

}

.center4{
transform: rotateZ(135deg) rotateX(-30deg);
animation: flowercenter4 3s ease-in-out 2s backwards;
複製程式碼

}

.inner4{
transform: rotateZ(135deg) rotateX(-60deg);
animation: flowerinner4 4s ease-in-out 3s backwards;
複製程式碼

}

.outer5{
transform: rotateZ(180deg) rotateX(-15deg);
animation: flowerouter5 2s ease-in-out 1s backwards;
複製程式碼

}

.center5{
transform: rotateZ(180deg) rotateX(-30deg);
animation: flowercenter5 3s ease-in-out 2s backwards;
複製程式碼

}

.inner5{
transform: rotateZ(180deg) rotateX(-60deg);
animation: flowerinner5 4s ease-in-out 3s backwards;
複製程式碼

}

.outer6{
transform: rotateZ(225deg) rotateX(-15deg);
animation: flowerouter6 2s ease-in-out 1s backwards;
複製程式碼

}

.center6{
transform: rotateZ(225deg) rotateX(-30deg);
animation: flowercenter6 3s ease-in-out 2s backwards;
複製程式碼

}

.inner6{
transform: rotateZ(225deg) rotateX(-60deg);
animation: flowerinner6 4s ease-in-out 3s backwards;
複製程式碼

}

.outer7{
transform: rotateZ(270deg) rotateX(-15deg);
animation: flowerouter7 2s ease-in-out 1s backwards;
複製程式碼

}

.center7{
transform: rotateZ(270deg) rotateX(-30deg);
animation: flowercenter7 3s ease-in-out 2s backwards;
複製程式碼

}

.inner7{
transform: rotateZ(270deg) rotateX(-60deg);
animation: flowerinner7 4s ease-in-out 3s backwards;
複製程式碼

}

.outer8{
transform: rotateZ(315deg) rotateX(-15deg);
animation: flowerouter8 2s ease-in-out 1s backwards;
複製程式碼

}

.center8{
transform: rotateZ(315deg) rotateX(-30deg);
animation: flowercenter8 3s ease-in-out 2s backwards;
複製程式碼

}

.inner8{
transform: rotateZ(315deg) rotateX(-60deg);
animation: flowerinner8 4s ease-in-out 3s backwards;
複製程式碼

}

@keyframes flowerouter1{
from{
	transform: rotateZ(0deg) rotateX(-90deg);
}
to{
	transform: rotateZ(0deg) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowerouter2{
from{
	transform: rotateZ(45deg) rotateX(-90deg);
}
to{
	transform: rotateZ(45deg) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowerouter3{
from{
	transform: rotateZ(90deg) rotateX(-90deg);
}
to{
	transform: rotateZ(90deg) rotateX(-15);
}
複製程式碼

}

@keyframes flowerouter4{
from{
	transform: rotateZ(135deg) rotateX(-90deg);
}
to{
	transform: rotateZ(135deg) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowerouter5{
from{
	transform:rotateZ(180deg) rotateX(-90deg);
}
to{
	transform:rotateZ(180) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowerouter6{
from{
	transform:rotateZ(225deg) rotateX(-90deg);
}
to{
	transform:rotateZ(225deg) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowerouter7{
from{
	transform:rotateZ(270deg) rotateX(-90deg);
}
to{
	transform:rotateZ(270deg) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowerouter8{
from{
	transform:rotateZ(315deg) rotateX(-90deg);
}
to{
	transform:rotateZ(315deg) rotateX(-15deg);
}
複製程式碼

}

@keyframes flowercenter1{
from{
	transform:rotateZ(0deg) rotateX(-90deg);
}
to{
	transform:rotateZ(0deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter2{
from{
	transform:rotateZ(45deg) rotateX(-90deg);
}
to{
	transform:rotateZ(45deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter3{
from{
	transform:rotateZ(90deg) rotateX(-90deg);
}
to{
	transform:rotateZ(90deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter4{
from{
	transform:rotateZ(135deg) rotateX(-90deg);
}
to{
	transform:rotateZ(135deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter5{
from{
	transform:rotateZ(180deg) rotateX(-90deg);
}
to{
	transform:rotateZ(180deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter6{
from{
	transform:rotateZ(225deg) rotateX(-90deg);
}
to{
	transform:rotateZ(225deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter7{
from{
	transform:rotateZ(270deg) rotateX(-90deg);
}
to{
	transform:rotateZ(270deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowercenter8{
from{
	transform:rotateZ(315deg) rotateX(-90deg);
}
to{
	transform:rotateZ(315deg) rotateX(-30deg);
}
複製程式碼

}

@keyframes flowerinner1{
from{
	transform:rotateZ(0deg) rotateX(-90deg);
}
to{
	transform:rotateZ(0deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner2{
from{
	transform:rotateZ(45deg) rotateX(-90deg);
}
to{
	transform:rotateZ(45deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner3{
from{
	transform:rotateZ(90deg) rotateX(-90deg);
}
to{
	transform:rotateZ(90deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner4{
from{
	transform:rotateZ(135deg) rotateX(-90deg);
}
to{
	transform:rotateZ(135deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner5{
from{
	transform:rotateZ(180deg) rotateX(-90deg);
}
to{
	transform:rotateZ(180deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner6{
from{
	transform:rotateZ(225deg) rotateX(-90deg);
}
to{
	transform:rotateZ(225deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner7{
from{
	transform:rotateZ(270deg) rotateX(-90deg);
}
to{
	transform:rotateZ(270deg) rotateX(-60deg);
}
複製程式碼

}

@keyframes flowerinner8{
from{
	transform:rotateZ(315deg) rotateX(-90deg);
}
to{
	transform:rotateZ(315deg) rotateX(-60deg);
}
複製程式碼

}

後面的程式碼重複的很多，只有數值的調整，原理就是使不同的花瓣從平面內立起來，繞不同軸旋轉使得它們的相對位置組合成我們想要的效果。

使用CSS製作火焰燃燒動畫
2019-03-13
CSS動畫
純css製作loading動畫
2018-04-02
CSS動畫
HTML5 Canvas 超逼真煙花綻放動畫
2022-05-04
HTMLCanvas動畫
強大的CSS：模擬下雪效果動畫製作教程
2019-05-17
CSS動畫
如何在Swiper內製作CSS3動畫效果
2017-11-27
CSSS3動畫
iOS專案開發實戰——製作檢視的縮放動畫
2015-08-20
iOS動畫
棒呆！如何用css3實現煙花綻放效果
2018-06-12
CSSS3
5分鐘學會製作 CSS 波浪文字動畫特效
2020-03-23
CSS動畫特效
簡單的CSS圓形縮放動畫
2018-01-31
CSS動畫
blufftitler 13,動畫製作
2022-01-27
FFT動畫
iOS 動畫製作方法。
2014-10-10
iOS動畫
【轉】5分鐘學會製作 CSS 波浪文字動畫特效
2020-03-27
CSS動畫特效
用 CSS3 和 JavaScript 製作徑向動畫選單
2014-04-29
CSSS3JavaScript動畫
8個純CSS3製作的動畫應用及原始碼
2014-10-22
CSSS3動畫原始碼
關於Autolayout製作動畫的坑
2017-12-13
動畫
用css3製作旋轉載入動畫的幾種方法薦
2012-04-11
CSSS3動畫
簡易製作貝塞爾曲線動畫（JS+css3+canvas）
2017-12-08
動畫JSCSSS3Canvas
一個簡單的CSS圓形縮放動畫
2018-01-29
CSS動畫
巧用 CSS 變數，實現動畫函式複用，製作高階感拉滿的網格動畫
2023-03-07
CSS變數動畫函式
使用 ConstraintLayout 製作漂亮的動畫
2019-02-23
AI動畫
Flutter動畫之Flare的製作與使用
2019-01-14
Flutter動畫
blender for Mac動畫製作軟體
2021-01-15
Mac動畫
mac動畫特效製作軟體
2021-10-27
Mac動畫特效
綻放資料視覺化之美
2019-05-11
視覺化
用CSS製作的圓角層
2009-03-15
CSS
Lottie Android 動畫製作與使用
2019-03-01
Android動畫
PPT動畫製作教程--文字掉落拼字
2017-01-16
動畫
製作CSS氣泡框
2010-04-03
CSS
奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能製作出多驚豔的動畫？
2021-08-24
CSS3D動畫
GIF動畫製作軟體哪個好
2019-08-22
動畫
動畫特效製作軟體：Express Animate mac
2022-03-25
動畫特效ExpressMac
CSS製作水滴波浪效果案例
2019-03-13
CSS
[譯] 使用CSS製作球體
2018-11-03
CSS
css製作下拉框效果
2018-06-14
CSS
用CSS來製作圖示
2018-01-23
CSS
每日CSS_純CSS製作進度條
2020-12-26
CSS
Canvas 放煙花合集 -- 用粉絲頭像做成煙花綻放?
2021-11-06
Canvas
使用 CSS 繪製帶有動畫效果的 React Logo
2022-04-27
CSS動畫ReactGo