如何在 Elementor 图库中创建波浪悬停效果：完整教程

在网页设计中，悬停效果是一种非常受欢迎的动态效果，可以在用户将鼠标移到图像或按钮上时显示。波浪悬停效果是一种柔和且吸引人的动画效果，它模拟了波浪的起伏，使得图片在悬停时呈现出类似水波的动态效果。本文将带你一步步学习如何在 Elementor 图库中实现这一效果。

准备工作

要在 Elementor 中创建波浪悬停效果，您需要以下条件：

1. Elementor 插件：确保已经安装并激活 Elementor 插件。如果需要更多高级样式，可以使用 Elementor Pro，但本教程可以在免费版 Elementor 中实现。
2. 自定义 CSS：波浪悬停效果需要一些自定义 CSS，因此，确保你的主题或 Elementor 版本允许自定义 CSS。如果使用 Elementor Pro，可以直接在元素的自定义 CSS 部分添加代码。

创建波浪悬停效果的步骤

步骤 1：添加 Elementor 图库小工具

1. 打开 WordPress 仪表板，导航到 页面 > 添加新页面，或者编辑现有页面。
2. 进入 Elementor 编辑器，在左侧工具栏中拖动 图库 小工具（Gallery）到页面中，然后上传希望展示的图片。

3. 配置图库的布局，以适应你的设计需求。

步骤 2：为图像添加类名

为了方便在特定图像上应用波浪效果，我们需要为图库中的图像添加一个自定义类名。这样可以让 CSS 代码仅作用于这些图像。

1. 选择图库小工具，点击 高级 标签。

2. 在 CSS 类 字段中，输入自定义类名，例如 wave-hover。

步骤 3：添加自定义 CSS 代码

接下来，我们将通过 CSS 来实现波浪悬停效果。以下是 CSS 代码，可以将其添加到页面的自定义 CSS 部分，或将其添加到主题的自定义 CSS 中（如果你的 Elementor 不支持直接添加 CSS）。

/* 基础样式：设置悬停效果的图像 */
.wave-hover img {
  display: block; /* 确保图像的动画效果正常 */
  transition: transform 0.4s ease-in-out; /* 添加平滑过渡效果 */
  will-change: transform; /* 优化性能，告知浏览器将更改transform */
}

/* 波浪悬停效果 */
.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animation: wave 0.6s ease-in-out infinite; /* 应用动画 */
}

/* 定义波浪动画 */
@keyframes wave {
  0%, 100% {
    transform: translateY(-10px) rotate(2deg); /* 起点和终点一致，平滑循环 */
  }
  25% {
    transform: translateY(-15px) rotate(-2deg); /* 图像上移，稍微反转 */
  }
  50% {
    transform: translateY(0px) rotate(2deg); /* 图像回到初始旋转 */
  }
  75% {
    transform: translateY(-5px) rotate(-1deg); /* 图像下移并微微旋转 */
  }
}

代码说明：

• .wave-hover img：这是默认状态下的样式，设置了图像的过渡效果，使得在悬停时能够平滑地过渡到波浪效果。
• .wave-hover img:hover：当鼠标悬停在图片上时，图片会稍微上移、旋转并放大，并开始波浪动画。
• @keyframes wave：定义了波浪动画的关键帧，使图像在悬停时上下起伏，产生波浪效果。

步骤 4：保存并预览页面

完成以上步骤后，保存页面并点击预览。在预览页面中，将看到，当鼠标悬停在图片上时，图像会产生波浪般的上下起伏效果，为用户带来独特的动态视觉体验。

可选步骤：调整效果参数

可以根据设计需求微调效果参数：

• 波浪幅度：通过调整 translateY() 值可以控制波浪效果的幅度。更大的数值会产生更明显的波动。
• 动画速度：调整 animation 属性中的持续时间（例如 0.6s）可以控制波浪效果的速度。
• 旋转角度：改变 rotate() 的值可调整图像的旋转角度。

进一步优化：添加阴影效果

为了增加效果的深度，还可以为悬停效果添加阴影，使图像在波动时显得更加立体。

.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animation: wave 0.6s ease-in-out infinite;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
}

总结

在网页设计中，悬停效果是一种受欢迎的动态效果，能够在用户将鼠标移到图像或按钮上时展示互动性。波浪悬停效果模拟了波浪的起伏，使图像在悬停时呈现出水波般的动态效果。本文介绍了如何在 Elementor 图库中实现这一效果，包括设置图像库、添加自定义类名、编写 CSS 波浪动画代码，以及根据需求调整效果的幅度、速度和阴影，使得网站更加生动、吸引用户注意。