动态纹理：为博客添加花瓣飘落效果

效果介绍

花瓣飘落效果是一种优雅的动态视觉元素，可以为博客增添生动的氛围。本文将介绍如何在 Hugo 博客中轻松实现这一效果，并对其进行优化，使其不影响正常阅读。

基础实现方法

要在 Hugo 博客中添加花瓣飘落效果，首先需要引入相关的 JavaScript 脚本。最简单的方法是在页面底部添加脚本引用。在 \layouts\partials\footer\custom.html 文件中添加以下代码：

1<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Ukenn2112/[email protected]/index/web.js"></script>

这段代码引用了一个开源的 JavaScript 库，它能够在页面上创建花瓣飘落的动画效果。添加完成后，刷新博客页面即可看到花瓣从屏幕上方飘落的效果。

改进显示层级

默认情况下，花瓣雨效果会显示在屏幕的最顶层，这可能会影响博客内容的阅读体验。为了解决这个问题，我们可以通过 CSS 调整花瓣显示的层级，使其显示在页面的最底层。在 \layouts\partials\footer\custom.html 中继续添加以下样式代码：

 1<style>
 2    /* 使特效在页面最底层显示 */
 3    #sakura,
 4    canvas,
 5    .webOverlay,
 6    body>canvas,
 7    canvas[style*="position: fixed"],
 8    canvas:not([class]):not([id]) {
 9        z-index: -9999 !important;
10        pointer-events: none !important;
11        position: fixed !important;
12    }
13</style>

这段 CSS 代码使用了多种选择器，确保能够精确定位到花瓣效果的元素，并将其设置为：

位于页面最底层（ z-index: -9999 ）
不拦截鼠标事件（ pointer-events: none ）
固定位置（ position: fixed ）这样，花瓣效果就会在不干扰用户阅读和交互的情况下在背景中飘落。

选择器说明

为了确保样式能够正确应用到花瓣效果元素，使用多种选择器组合：

#sakura - 针对可能带有特定 ID 的花瓣容器
canvas - 针对所有 canvas 元素（花瓣效果通常使用 canvas 实现）
.webOverlay - 针对可能的覆盖层类名
body > canvas - 针对直接附加到 body 的 canvas 元素
canvas[style*="position: fixed"] - 针对具有 fixed 定位的 canvas 元素
canvas:not([class]):not([id]) - 针对没有类和 ID 的 canvas 元素

使用 !important 标记确保这些样式能够覆盖原始脚本中的样式设置，有效地将花瓣效果推送到页面底层。

自定义效果

如果希望调整花瓣的颜色、大小或飘落速度，可以探索修改原始脚本或寻找支持参数配置的替代脚本。许多类似的效果库都提供了参数化配置的选项，可以根据个人喜好进行调整。