您是否在热门网站上看到了这些漂亮的CSS动画? 动画效果,例如滑动的内容,消散的内容,反弹的图像等。 ? 您还想将CSS动画添加到WordPress吗?

在本文中,我们将向您展示如何轻松地将CSS动画添加到WordPress,而无需编写任何代码。

当你为什么要使用CSS动画?

CSS动画使您可以将用户的注意力吸引到页面的不同部分。 您可以使用它们来制作产品功能或号召性用语的动画。 当用户向下滚动页面时,许多网站都使用CSS动画。 它在页面上增加了一些个性,并强调了最重要的元素。

CSS动画也比使用Flash或视频更快。 它们加载速度很快,并且得到大多数现代Web浏览器的支持。 您可以将CSS动画手动添加到WordPress主题或样式表中。 子主题。 但是,大多数初学者不想编辑其主题文件或学习CSS。

也就是说,在本教程中,我们将看到如何轻松地将CSS动画添加到WordPress网站。

但是之前,如果您从未安装过WordPress发现 如何安装WordPress博客7步骤 et 如何找到,安装和你的博客激活WordPress主题 

然后回到为什么我们在这里。

如何设置CSS动画

我们将在本教程中使用一个插件。 它允许您使用创建CSS动画 所见即所得的视觉编辑器。 您需要做的第一件事是安装并激活插件 动画吧!. 该插件无需配置即可工作,并且没有控制面板。

发现 如何安装在WordPress插件 如果您从未做过。

只需创建一个新帖子,您将在可视编辑器工具栏上看到一个新按钮。

在WordPress上添加CSS动画-animateit-button

通过单击按钮,您将看到一个新窗口出现,您可以在其中设计CSS动画。 该插件支持许多CSS动画,供您选择。

动画编辑器

首先,您需要选择动画样式。 之后,您需要选择动画之前的等待时间和动画的持续时间。 最后,您可以指定动画的开始时间。

还可以通过发现进一步 如何印象深刻的动画添加到您的博客

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

将CSS动画添加到WordPress-animateon

对设置满意后,您可以点击按钮“ 它动画 查看动画的预览。

然后点击按钮 插页 将动画添加到您的帖子或页面。 您会注意到,该插件将在可视化编辑器上添加带有伪内容的简码。

动画,简码

您需要删除简码中的虚拟内容,并将其替换为您自己的内容,图像或其他要设置动画的内容。

也发现 如何向您的WordPress网站添加交互式地图

内容简码

您现在要做的就是发布您的内容并对其进行预览。

还发现一些高级WordPress插件  

您可以使用其他 WordPress插件 赋予现代外观并优化您的博客或网站的处理。

我们在这里为您提供了一些高级WordPress插件,它们将帮助您实现这一目标。

1。 ChimpMate专业版

黑猩猩是 WordPress插件 MailChimp 的高级弹出窗口,它将帮助您将读者转化为订阅者。 它旨在增加您的电子邮件列表,而不会因烦人的弹出窗口而激怒访问者。黑猩猩专业版

它是完全可定制的,您将掌握何时何地显示弹出窗口。 它的其他功能是:支持 的几个浏览器,并具有p多个计划选项,完全可自定义的布局,响应式客户支持与完美融合 WooCommerce ,excellente 缓存管理,完美融合 和很多 WordPress主题, 多语言支持感谢 到WPML插件,e不再那么多了。

下载演示 | 虚拟主机

2。 WooCommerce Cardstream支付网关

CardStream 是唯一的独立支付网关提供商。 这个 WordPress插件 高级版允许您通过 Cardstream 直接在您的 WooCommerce 在线商店上接受付款。

WooCommerce Cardstream支付网关

它还使您能够使用Cardstream托管解决方案接受付款。

下载演示 | 虚拟主机

3。 数据源

数据源是一个 WordPress插件 premium 专注于您网站任何页面中数据的视觉呈现。 它允许您将 CSV 文件、XML、Excel、Google 电子表格、MySQL 数据库或自定义帖子类型中的数据呈现为可排序和可过滤的表格、不同的图表、地图等。数据源wordpress插件插入图形表网站博客表单

在它的功能中,您会发现:直观的界面,t基于您的数据模型的可分类,可过滤和反应灵敏的人支持 谷歌地图多种语言快速响应的客户支持,一米用户手册,i快速安装,例如更多

下载 演示 | 虚拟主机

推荐资源

查找有关其他推荐资源的信息,以帮助您构建和管理网站。

结论

这里 ! 就是本教程了,我们希望它能帮助您学习如何在WordPress中集成CSS动画。 不要犹豫 与您最喜欢的社交网络上的朋友分享

但是,您也可以咨询我们的 RESSOURCES,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建。

如果您有任何建议或意见,请将其留在我们的部分 评论.

...