SVG玫瑰花盛开动画特效_前端实现花盛开动画-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148793227

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG玫瑰花盛开动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.rose-container {
width: 400px;
height: 500px;
position: relative;
}

.stem {
stroke: #4CAF50;
stroke-width: 10;
stroke-linecap: round;
fill: none;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: drawStem 2s ease-out forwards;
}

.leaf {
fill: #4CAF50;
stroke: #388E3C;
stroke-width: 2;
opacity: 0;
transform-origin: center;
}

.leaf-left {
animation: fadeInLeaf 0.5s ease-out 2s forwards, swayLeft 3s ease-in-out 2.5s infinite;
}

.leaf-right {
animation: fadeInLeaf 0.5s ease-out 2.2s forwards, swayRight 3s ease-in-out 2.7s infinite;
}

.petal {
transform-origin: center;
opacity: 0;
}

.center-circle {
fill: #FFD700;
opacity: 0;
transform-origin: center;
animation: fadeIn 0.5s ease-out 3s forwards, pulse 2s ease-in-out 3.5s infinite;
}

.credit {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
z-index: 100;
}

.credit a {
color: #FFD700;
text-decoration: none;
transition: color 0.3s;
}

.credit a:hover {
color: #FF9800;
}

/* 动画定义 */
@keyframes drawStem {
to {
stroke-dashoffset: 0;
}
}

@keyframes fadeInLeaf {
to {
opacity: 1;
}
}

@keyframes swayLeft {
0%, 100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}

@keyframes swayRight {
0%, 100% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
}

@keyframes fadeIn {
to {
opacity: 1;
}
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}

@keyframes bloom {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}

/* 花瓣动画 - 每个花瓣有不同的延迟 */
.petal-1 { animation: bloom 0.8s ease-out 3.2s forwards; }
.petal-2 { animation: bloom 0.8s ease-out 3.4s forwards; }
.petal-3 { animation: bloom 0.8s ease-out 3.6s forwards; }
.petal-4 { animation: bloom 0.8s ease-out 3.8s forwards; }
.petal-5 { animation: bloom 0.8s ease-out 4.0s forwards; }
.petal-6 { animation: bloom 0.8s ease-out 4.2s forwards; }
.petal-7 { animation: bloom 0.8s ease-out 4.4s forwards; }
.petal-8 { animation: bloom 0.8s ease-out 4.6s forwards; }
.petal-9 { animation: bloom 0.8s ease-out 4.8s forwards; }
.petal-10 { animation: bloom 0.8s ease-out 5.0s forwards; }
.petal-11 { animation: bloom 0.8s ease-out 5.2s forwards; }
.petal-12 { animation: bloom 0.8s ease-out 5.4s forwards; }
</style>
</head>
<body>
<div class="container">
<div class="rose-container">
<svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg">

<path class="stem" d="M200,500 C200,400 200,350 200,300 C200,250 210,200 200,150" />


<path class="leaf leaf-left" d="M200,350 C180,330 150,320 130,340 C120,350 125,370 140,380 C160,390 180,380 200,370" />
<path class="leaf leaf-right" d="M200,300 C220,280 250,270 270,290 C280,300 275,320 260,330 C240,340 220,330 200,320" />


<circle class="center-circle" cx="200" cy="150" r="15" />


<path class="petal petal-1" fill="#FF4081" d="M200,150 C190,130 170,120 150,130 C140,140 140,160 150,170 C170,180 190,170 200,160" />
<path class="petal petal-2" fill="#E91E63" d="M200,150 C210,130 230,120 250,130 C260,140 260,160 250,170 C230,180 210,170 200,160" />
<path class="petal petal-3" fill="#FF4081" d="M200,140 C180,140 160,150 160,170 C160,180 170,190 180,190 C200,190 210,180 200,170" />
<path class="petal petal-4" fill="#E91E63" d="M200,140 C220,140 240,150 240,170 C240,180 230,190 220,190 C200,190 190,180 200,170" />
<path class="petal petal-5" fill="#FF4081" d="M190,150 C170,160 160,180 170,200 C180,210 200,210 200,190" />
<path class="petal petal-6" fill="#E91E63" d="M210,150 C230,160 240,180 230,200 C220,210 200,210 200,190" />
<path class="petal petal-7" fill="#FF4081" d="M200,160 C180,170 170,190 180,210 C190,220 200,220 200,200" />
<path class="petal petal-8" fill="#E91E63" d="M200,160 C220,170 230,190 220,210 C210,220 200,220 200,200" />
<path class="petal petal-9" fill="#FF4081" d="M190,170 C170,190 180,220 190,230 C200,240 200,220 200,210" />
<path class="petal petal-10" fill="#E91E63" d="M210,170 C230,190 220,220 210,230 C200,240 200,220 200,210" />
<path class="petal petal-11" fill="#FF4081" d="M200,180 C180,200 190,230 200,240 C210,250 210,230 210,220" />
<path class="petal petal-12" fill="#E91E63" d="M200,180 C220,200 210,230 200,240 C190,250 190,230 190,220" />
</svg>
</div>

<div class="credit">
</div>
</div>
</body>
</html>