CSS动画制作绽放的花朵

Oreo_Cookie
3,681 阅读6分钟

最近看到几篇有关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);
}

}

后面的代码重复的很多，只有数值的调整，原理就是使不同的花瓣从平面内立起来，绕不同轴旋转使得它们的相对位置组合成我们想要的效果。

avatar
文章
阅读
粉丝