###
樱花雨效果的实现
樱花雨效果通常通过 CSS 和 JavaScript 实现，可以模拟花瓣飘落的效果。以下是基于 HTML5、CSS3 和 JavaScript 的一种常见实现方式。
#### 使用 Canvas 绘制
樱花雨动画
Canvas 是 HTML5 提供的强大工具之一，适合用于绘制动态图形和动画。以下是一个简单的
樱花雨动画示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
樱花雨</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #f7ecec; /* 浅粉色背景 */
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="cherryBlossom"></canvas>
<script>
const canvas = document.getElementById('cherryBlossom');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Petal {
constructor() {
this.x = Math.random() * canvas.width;
this.y = -Math.random() * canvas.height;
this.size = Math.random() * 5 + 2;
this.speedX = (Math.random() - 0.5) * 2;
this.speedY = Math.random() * 2 + 1;
this.opacity = Math.random() * 0.5 + 0.5;
}
draw() {
ctx.save();
ctx.globalAlpha = this.opacity;
ctx.fillStyle = '#ffcccc'; // 淡粉红色
ctx.beginPath();
ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.y > canvas.height || this.x < 0 || this.x > canvas.width) {
this.y = -Math.random() * canvas.height;
this.x = Math.random() * canvas.width;
}
}
}
let petals = [];
for (let i = 0; i < 100; i++) { // 创建100片花瓣
petals.push(new Petal());
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
petals.forEach(petal => {
petal.update();
petal.draw();
});
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
```
此代码实现了在画布上随机生成并移动多个圆形图案作为“樱花”，并通过 `requestAnimationFrame` 方法不断更新位置以形成下落动画[^4]。
#### 基于纯 CSS 的简单
樱花雨效果
如果不需要复杂的交互功能，也可以仅依靠 CSS 来创建静态或轻微动态的
樱花雨效果：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS
樱花雨</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f7ecec;
position: relative;
overflow: hidden;
}
.petal {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: pink;
position: absolute;
animation: fall linear infinite;
}
@keyframes fall {
from {
transform: translateY(-100%);
opacity: 1;
}
to {
transform: translateY(100%) rotateZ(360deg); /* 添加旋转效果 */
opacity: 0;
}
}
/* 动态调整速度和大小 */
.slow-fall {
animation-duration: 8s;
}
.medium-fall {
animation-duration: 6s;
}
.fast-fall {
animation-duration: 4s;
}
</style>
</head>
<body>
<div class="petal slow-fall" style="left: 10%; top: -10px;"></div>
<div class="petal medium-fall" style="left: 30%; top: -10px;"></div>
<div class="petal fast-fall" style="left: 50%; top: -10px;"></div>
<!-- 可重复添加更多花瓣 -->
</body>
</html>
```
上述代码利用了 CSS 中的关键帧动画 (`@keyframes`) 来定义花瓣从顶部到底部逐渐消失的过程，并通过不同的类名控制其下降的速度[^5]。
---
###
介绍了1998年心灵音乐销售排行榜冠军专辑，该专辑运用钢琴、风铃、笛声、电子合成器等音色，营造出如心灵花园般广大开阔的空间，还列出了《樱花雨》《冬阳》等专辑曲目。
扫一扫
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
