CSS动画制作绽放的花朵

最新推荐文章于 2023-09-01 19:02:13 发布

转载

最新推荐文章于 2023-09-01 19:02:13 发布 · 966 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a9122c76fb9a063435ef4c5

本文通过CSS3技术，包括transform、animation、linear-gradient、border-radius和box-shadow，实现了一个立体感十足的花朵绽放动画。HTML结构简洁，主要通过调整不同花瓣的位置和旋转角度来创建花朵效果。文章详细展示了CSS代码，适合对CSS3感兴趣的读者学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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