Elementor 正在滑动 - CSS

简介

Elementor 是一款流行的 WordPress 页面建设插件，它使您能够以直观且无需编码的方式创建定制的网页布局。在 Elementor 中，滑动效果是一种非常常见且受欢迎的交互设计。通过使用 CSS，您可以为 Elementor 元素添加滑动效果，并为您的网页增添更多的动态性和吸引力。

在本文中，我们将学习如何为 Elementor 元素添加滑动效果，并提供一些常用的 CSS 代码片段供您参考。

使用步骤

以下是为 Elementor 元素添加滑动效果的步骤：

1. 确保您已经安装并激活了 Elementor 插件，并创建了一个页面。
2. 在页面编辑器中，选择您想要添加滑动效果的元素。
3. 在右侧的“高级”选项卡中，找到“CSS 类名称”字段，并为元素添加一个自定义的类名称。
4. 在 WordPress 后台的“外观” -> “自定义主题” -> “附加 CSS”中，或者使用您所使用的 WordPress 主题提供的其他自定义 CSS 的选项，将以下代码片段添加到您的主题中：

/* 添加滑动效果的 CSS 类名称 */
.elementor-active-slide .your-custom-class {
  animation-name: slide;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

/* 滑动效果的关键帧动画 */
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

注意：请将 .your-custom-class 替换为您在第 3 步中为元素添加的自定义类名称。

5. 保存并预览您的页面，您应该可以看到添加了滑动效果的元素在页面加载时以动画形式出现。

其他滑动效果变体

除了从右向左滑动的动画效果外，您还可以尝试其他不同的滑动效果变体。下面是一些常用的滑动效果代码片段，您可以根据需要进行调整和自定义：

从左向右滑动

.elementor-active-slide .your-custom-class {
  animation-name: slide-left;
  /* 其他属性同样 */
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

从上到下滑动

.elementor-active-slide .your-custom-class {
  animation-name: slide-down;
  /* 其他属性同样 */
}

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

从下到上滑动

.elementor-active-slide .your-custom-class {
  animation-name: slide-up;
  /* 其他属性同样 */
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

结论

通过使用 CSS，您可以为 Elementor 元素添加滑动效果，使您的网页看起来更加动态和吸引人。使用上述步骤并结合自定义的 CSS 代码，您可以轻松地实现滑动效果，并根据需要调整和自定义动画效果。

注意：在使用任何 CSS 代码片段之前，请确保您已经备份了您的网站，并在进行任何修改之前进行测试。