如何在 WordPress 中轻松添加 CSS 动画

你见过流行网站上那些漂亮的 CSS 动画吗?滑动内容、淡入淡出功能框、弹跳图像等动画效果。在本文中,我们将向您展示如何在 WordPress 中轻松添加 CSS 动画,而无需编写任何代码。

使用 CSS 动画的定价表

何时以及为什么应该使用 CSS 动画?

CSS动画允许您在页面的不同部分吸引用户的注意力。

您可以使用它们为产品功能或号召性用语按钮设置动画。

许多网站在用户向下滚动页面时使用 CSS 动画。这会在页面中添加一个讲故事的元素,当用户向下滚动时,项目会继续进行。

CSS 动画也比 Flash 或视频快。它们加载速度很快,并且受到大多数现代 Web 浏览器的支持。

您可以手动将 CSS 动画添加到您的 WordPress 主题或子主题的样式表中。但是,大多数初学者不想编辑他们的主题文件或花时间学习 CSS。

话虽如此,让我们看看如何轻松地将 CSS 动画添加到 WordPress 网站。

设置 CSS 动画!插入

我们将在本教程中使用插件。它允许您使用所见即所得的编辑器创建 CSS 动画。

您需要做的第一件事是安装并激活Animate 它!插入。该插件开箱即用,您无需配置任何设置。

只需创建一个新帖子,您就会在 WordPress可视化编辑器中看到一个标有“动画它!”的新按钮。

WordPress 可视化编辑器中的动画按钮

单击该按钮将弹出一个弹出窗口,您可以在其中设计 CSS 动画。该插件支持多种 CSS 动画供您选择。

动画编辑器

首先,您需要选择一种动画样式。之后,您需要选择动画延迟和持续时间。最后,您需要选择希望动画出现的时间。

该插件提供三种选择。您可以在单击、悬停或滚动偏移时运行动画。

选择何时运行动画

对设置感到满意后,您可以单击“Animate it”按钮查看动画预览。

接下来,单击插入按钮将动画添加到您的 WordPress 帖子或页面中。您会注意到该插件会将包含一些虚拟内容的短代码添加到帖子编辑器中。

CSS 动画! 帖子编辑器中的短代码

您需要删除短代码中的虚拟内容,并将其替换为您自己的内容、图像或您想要动画的任何其他内容。

用您自己的内容替换短代码中的虚拟内容

现在您已关闭,单击以保存或发布帖子,然后单击预览按钮。您将看到内容精美的动画。

我们希望本文能帮助您了解如何在 WordPress 中轻松添加 CSS 动画。您可能还想查看我们对5 种最佳拖放式 WordPress 页面构建器的比较。