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製作loading動畫
2018-04-02
CSS動畫
使用CSS製作火焰燃燒動畫
2019-03-13
CSS動畫
HTML5 Canvas 超逼真煙花綻放動畫
2022-05-04
HTMLCanvas動畫
強大的CSS：模擬下雪效果動畫製作教程
2019-05-17
CSS動畫
5分鐘學會製作 CSS 波浪文字動畫特效
2020-03-23
CSS動畫特效
Maya 2023，動畫製作
2022-03-31
動畫
blufftitler 13,動畫製作
2022-01-27
FFT動畫
使用 ConstraintLayout 製作漂亮的動畫
2019-02-23
AI動畫
【轉】5分鐘學會製作 CSS 波浪文字動畫特效
2020-03-27
CSS動畫特效
製作動畫的素材和資源
2018-09-20
動畫
使用css製作吊扇轉動的效果
2024-12-10
CSS
使用GSAP製作動畫影片
2024-07-15
動畫
GIF動畫線上製作
2020-04-04
動畫
巧用 CSS 變數，實現動畫函式複用，製作高階感拉滿的網格動畫
2023-03-07
CSS變數動畫函式
棒呆！如何用css3實現煙花綻放效果
2018-06-12
CSSS3
Flutter動畫之Flare的製作與使用
2019-01-14
Flutter動畫
mac動畫特效製作軟體
2021-10-27
Mac動畫特效
blender for Mac動畫製作軟體
2021-01-15
Mac動畫
Lottie Android 動畫製作與使用
2019-03-01
Android動畫
奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能製作出多驚豔的動畫？
2021-08-24
CSS3D動畫
為角色外表注入“靈魂”的動畫製作
2021-07-21
動畫
使用 CSS 繪製帶有動畫效果的 React Logo
2022-04-27
CSS動畫ReactGo
《煙火》，獨立綻放
2021-03-05
CSS中的“大白”——CSS 動畫
2019-02-28
CSS動畫
用PPT製作一個簡易的演示動畫
2024-12-06
動畫
動畫裡喜歡的音樂製作學習
2024-05-17
動畫
css動畫
2024-10-18
CSS動畫
QuartzCode for Mac(動畫開發製作應用)
2022-01-04
quartzMac動畫
GIF動畫製作軟體哪個好
2019-08-22
動畫
動畫特效製作軟體：Express Animate mac
2022-03-25
動畫特效ExpressMac
實時渲染如何改變影片製作和動畫製作
2022-11-03
動畫
短視訊開發，製作上下動態的箭頭動畫
2022-04-29
動畫
CSS速刷 - CSS動畫
2024-10-21
CSS動畫
CSS動畫篇之404動畫
2022-05-05
CSS動畫
「MacOS」三維動畫製作必備工具分享
2022-12-01
Mac動畫
KeyShot Pro for mac(3D渲染動畫製作)
2022-06-30
Mac3D動畫
Toon Boom Harmony 21,2D動畫製作
2021-10-16
OOM動畫
福利！Python製作動態字元畫（附原始碼）
2021-07-31
Python字元原始碼
如何選擇3D動畫製作公司
2020-07-24
3D動畫