交互式入门：点击绽放的樱花树（花瓣飘落动画）

最新推荐文章于 2025-05-06 21:11:43 发布

谷雪_658

最新推荐文章于 2025-05-06 21:11:43 发布

阅读量1.1k

点赞数 32

分类专栏：前端文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/2301_76277481/article/details/147705973

版权

前端专栏收录该内容

11 篇文章

订阅专栏

一、引言

在网页设计中，交互式元素能够极大地提升用户体验，让用户更深入地参与到网页内容中。樱花树作为一种美丽而富有诗意的象征，其花瓣飘落的动画效果更是能为网页增添浪漫与灵动的氛围。本文将详细介绍如何使用 HTML、CSS 和 JavaScript 实现一个点击绽放的樱花树，并且带有花瓣飘落的动画效果，适合初学者作为交互式网页设计的入门项目。

二、实现思路

要实现点击绽放的樱花树和花瓣飘落动画，我们可以将整个过程分为以下几个步骤：

HTML 结构搭建：创建樱花树和花瓣的基本 HTML 元素。
CSS 样式设计：为樱花树和花瓣添加样式，包括颜色、形状、大小等，同时使用 CSS 动画实现花瓣飘落的效果。
JavaScript 交互逻辑：监听用户的点击事件，当用户点击樱花树时，触发花瓣绽放和飘落的动画。

三、代码实现

3.1 HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击绽放的樱花树</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="sakura-tree" id="sakuraTree">
        <div class="trunk"></div>
        <div class="branches"></div>
    </div>
    <div class="petals-container" id="petalsContainer"></div>
    <script src="script.js"></script>
</body>

</html>

在这段 HTML 代码中，我们创建了一个 div 元素，类名为 sakura-tree，表示樱花树。在樱花树内部，又包含了两个 div 元素，分别是 trunk 表示树干，branches 表示树枝。另外，还创建了一个 div 元素，类名为 petals-container，用于存放飘落的花瓣。最后，引入了外部的 CSS 文件 styles.css 和 JavaScript 文件 script.js。

3.2 CSS 样式

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

/* 樱花树样式 */
.sakura-tree {
    position: relative;
    width: 200px;
    height: 400px;
}

.trunk {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 300px;
    background-color: #8B4513;
    border-radius: 10px;
}

.branches {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 300px;
    background: url('sakura_branches.png') no-repeat center center;
    background-size: contain;
}

/* 花瓣样式和动画 */
.petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FFB6C1;
    border-radius: 50%;
    opacity: 0;
    animation: fall 5s linear infinite;
}

@keyframes fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(360deg);
    }
}

代码解释

全局样式：将 body 元素设置为使用 Flexbox 布局，使樱花树在页面中垂直和水平居中显示。
樱花树样式：
- .sakura-tree：设置樱花树的相对定位和尺寸。
- .trunk：设置树干的绝对定位、位置、宽度、高度、背景颜色和圆角。
- .branches：设置树枝的绝对定位、位置、宽度、高度和背景图片，这里使用了一张樱花树枝的图片。
花瓣样式和动画：
- .petal：设置花瓣的绝对定位、尺寸、背景颜色、圆角和初始透明度为 0，并应用 fall 动画。
- @keyframes fall：定义了花瓣飘落的动画，从初始位置垂直向下移动，同时旋转 360 度，透明度从 1 逐渐变为 0。

3.3 JavaScript 交互逻辑

const sakuraTree = document.getElementById('sakuraTree');
const petalsContainer = document.getElementById('petalsContainer');

sakuraTree.addEventListener('click', () => {
    for (let i = 0; i < 50; i++) {
        const petal = document.createElement('div');
        petal.classList.add('petal');
        petal.style.left = Math.random() * window.innerWidth + 'px';
        petal.style.animationDuration = (Math.random() * 3 + 2) + 's';
        petalsContainer.appendChild(petal);

        setTimeout(() => {
            petal.remove();
        }, 5000);
    }
});

代码解释

首先，通过 document.getElementById 方法获取樱花树和花瓣容器的元素。
然后，使用 addEventListener 方法监听樱花树的点击事件。
当用户点击樱花树时，使用 for 循环创建 50 个花瓣元素。
为每个花瓣元素添加 petal 类，并设置其初始位置为随机的水平位置。
随机设置每个花瓣的动画持续时间，范围在 2 到 5 秒之间。
将花瓣元素添加到花瓣容器中。
使用 setTimeout 方法在 5 秒后移除花瓣元素，避免页面中元素过多。

四、完整代码

HTML 代码（index.html）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击绽放的樱花树</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="sakura-tree" id="sakuraTree">
        <div class="trunk"></div>
        <div class="branches"></div>
    </div>
    <div class="petals-container" id="petalsContainer"></div>
    <script src="script.js"></script>
</body>

</html>

CSS 代码（styles.css）

/* 全局样式 */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

/* 樱花树样式 */
.sakura-tree {
    position: relative;
    width: 200px;
    height: 400px;
}

.trunk {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 300px;
    background-color: #8B4513;
    border-radius: 10px;
}

.branches {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 300px;
    background: url('sakura_branches.png') no-repeat center center;
    background-size: contain;
}

/* 花瓣样式和动画 */
.petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FFB6C1;
    border-radius: 50%;
    opacity: 0;
    animation: fall 5s linear infinite;
}

@keyframes fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(360deg);
    }
}

JavaScript 代码（script.js）

const sakuraTree = document.getElementById('sakuraTree');
const petalsContainer = document.getElementById('petalsContainer');

sakuraTree.addEventListener('click', () => {
    for (let i = 0; i < 50; i++) {
        const petal = document.createElement('div');
        petal.classList.add('petal');
        petal.style.left = Math.random() * window.innerWidth + 'px';
        petal.style.animationDuration = (Math.random() * 3 + 2) + 's';
        petalsContainer.appendChild(petal);

        setTimeout(() => {
            petal.remove();
        }, 5000);
    }
});

五、总结

通过结合 HTML、CSS 和 JavaScript，我们成功实现了一个点击绽放的樱花树，并且带有花瓣飘落的动画效果。这个项目不仅展示了如何创建交互式网页元素，还介绍了如何使用 CSS 动画和 JavaScript 事件处理。你可以根据自己的需求对代码进行修改和扩展，例如改变樱花树的样式、增加花瓣的数量或调整动画的参数，让樱花树更加绚丽多彩。

将上述代码分别保存为 index.html、styles.css 和 script.js 文件，确保它们在同一目录下，并且准备好一张名为 sakura_branches.png 的樱花树枝图片。然后在浏览器中打开 index.html 文件，点击樱花树，就可以看到花瓣飘落的美丽动画了。希望这个项目能帮助你开启交互式网页设计的大门！