CSS動畫製做綻開的花朵

時間  2019-12-05
標籤 css 動畫 製做 綻開 花朵 欄目 CSS 简体版
原文   原文鏈接

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

話很少說，先上動圖：

這是播放效果html

看起來比較複雜，其實否則。運用的技術點以下：併發

  • 轉換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);spa

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

}3d

爲了展示出立體感和距離感

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

}code

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

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

最關鍵的花瓣部分

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

#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);
}
複製代碼

}

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程