这段代码通过 HTML 和 CSS 的结合，创建了一个动态的花朵效果，展示了 CSS 动画和定位的强大功能。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端Hardy</title>
<style>
body {
background-color: #21324C;
color: #fff;
font-family: 'Indie Flower', cursive;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.text {
margin-top: -300px;
margin-bottom: 150px;
text-align: center;
}
.text h1 {
margin: 5px 0;
}
.text h3 {
margin: 0;
}
.text a {
color: #d52d58;
text-decoration: none;
}
.flower {
position: relative;
top: -80px;
left: -20px;
}
.flower:nth-of-type(2) {
left: -80px;
top: -19px;
transform: scale(.7);
}
.flower:nth-of-type(3) {
left: 55px;
top: -19px;
transform: scale(.7);
}
.flower .petal {
position: absolute;
top: 0;
left: 0;
background-color: #d52d58;
border-radius: 0px 30px 0px 30px;
width: 30px;
height: 60px;
}
.flower .petal:nth-child(1) {
left: -10px;
transform: rotate(-10deg);
transform-origin: bottom right;
background-color: #b81b43;
animation: openleft 3s ease-in infinite;
z-index: 5;
}
.flower .petal:nth-child(2) {
left: -10px;
background-color: #c9204b;
z-index: 4;
}
.flower .petal:nth-child(3) {
border-radius: 30px;
left: 5px;
}
.flower .petal:nth-child(4) {
border-radius: 30px 0px 30px 0px;
background-color: #c9204b;
left: 20px;
z-index: 4;
}
.flower .petal:nth-child(5) {
border-radius: 30px 0px 30px 0px;
left: 20px;
transform: rotate(10deg);
transform-origin: bottom left;
animation: openright 3s ease-in infinite;
background-color: #b81b43;
z-index: 5;
}
.flower .rod {
background-color: #329932;
width: 5px;
height: 150px;
position: absolute;
left: 17.5px;
top: 58px;
z-index: -1;
}
.flower .rod::before {
background-color: lightgreen;
border-radius: 3px;
content: '';
display: block;
width: 20px;
height: 8px;
margin-left: -8px;
}
.flower .rod .spike {
width: 0;
height: 0;
position: absolute;
top: 20px;
left: -10px;
border-color: transparent #329932 transparent transparent;
border-style: solid;
border-width: 5px;
}
.flower .rod .spike:nth-child(2) {
top: 50px;
left: 4px;
border-color: transparent transparent transparent #329932;
}
.flower .rod .spike:nth-child(3) {
top: 80px;
}
.flower .rod .spike:nth-child(4) {
top: 110px;
left: 4px;
border-color: transparent transparent transparent #329932;
}
@keyframes openleft {
20%,
80% {
transform: rotate(-20deg);
}
}
@keyframes openright {
20%,
80% {
transform: rotate(20deg);
}
}
</style>
</head>
<body>
<div class="flower">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="rod">
<div class="spike"></div>
<div class="spike"></div>
<div class="spike"></div>
<div class="spike"></div>
</div>
</div>
<div class="flower">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="rod">
<div class="spike"></div>
<div class="spike"></div>
<div class="spike"></div>
<div class="spike"></div>
</div>
</div>
<div class="flower">
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="petal"></div>
<div class="rod">
<div class="spike"></div>
<div class="spike"></div>
<div class="spike"></div>
<div class="spike"></div>
</div>
</div>
</body>
</html>
- .flower 设置花朵的位置和布局。position: relative; 相对定位。top: -80px; 和 left: -20px; 调整花朵的位置。
- .flower .petal 设置花瓣的样式。position: absolute; 绝对定位。background-color: #d52d58; 背景颜色为粉红色。border-radius: 0px 30px 0px 30px; 设置边框圆角。
- .flower .petal 子选择器根据不同的花瓣子元素，设置不同的样式，如旋转角度、背景颜色等。
- .flower .rod 设置花杆的样式。background-color: #329932; 背景颜色为绿色。width: 5px; 宽度为 5px。height: 150px; 高度为 150px。
- .flower .rod::before 设置花杆顶部的装饰。background-color: lightgreen; 背景颜色为浅绿色。
- .flower .rod .spike 设置花杆上的刺。border-color: transparent #329932 transparent transparent; 设置边框颜色，形成三角形的刺。
- @keyframes openleft 和 @keyframes openright 定义关键帧动画，用于创建花瓣的开合效果。
