你应该见过很多知名网站上使用的非常漂亮的CSS动画效果,例如滑动的内容块,渐变区块,弹出的图像等等。现在曹晓涛就跟大家分享下如何在WordPress中添加CSS动画效果。

Pricing table animated using CSS

何时并且为什么要使用CSS动画?

CSS动画无论在页面的那个位置都可以让你很容易的获得访客的注意。

你可以使用CSS动画来动态的呈现产品的不同特色,也可以促使访客进一步联系我们。

CSS动画加载起来也比Flash和视频更快,而且已经被现代大多数的浏览器所支持。

你可以手动的添加CSS动画到WordPress主题或者子主题中,大多数的WordPress初学者并不愿意编辑主题文件,也不愿意花时间去学习CSS。既然这样,那我们看看如何通过简单的方法添加CSS动画到WordPress站点中。

通过Animate it!插件来设置CSS动画

在WordPress网站后台安装并启用Animate it!插件,然后我们就可以在编辑器中直接创建CSS动画效果了。

安装好Animate it!插件后,简单创建一个新页面,这样你就可以看到在WordPress的编辑器中有个叫“Animate it!”的小图标了。

Animate it button in WordPress visual editor

点击这个图标,就会出现下图的弹窗,然后你就可以设置你的CSS动画了,因为这个插件已经预设了很多CSS动画供你选择。

Animation editor

首先你需要选择一个动画样式,然后你可以选择页面加载后多久显示动画以及动画持续的时间,最后你还可以选择动画是否循环播放。

这个插件还提供了三个激活CSS动画的选项:点击、悬停和滚动偏移。

Select when to run the animation

如果你设置好了之后,可以点击Animate it按钮来预览动画效果。然后就可以通过点击“插入”按钮来将动画效果插入到WordPress的页面中。其实点击完插入后,你看到是一段实例代码。

CSS animateit! shortcode in post editor

你需要删除掉样式代码中间的文字内容,然后添加你自己的内容、图片或者任何你想要通过CSS动画展现的内容。

Replace dummy content inside shortcode with your own content

现在你已经在WordPress中创建了CSS动画效果,你可以按照上面设置的点击、悬停或者滚动偏移来查看动画效果了,怎样是不是很酷啊?

曹晓涛友情提示:CSS动画效果虽然很酷,但是过多的使用CSS动画会增大页面加载的时间,所以酌情使用奥!

0 人喜欢
891 人查阅

你可能对下面的文章也感兴趣...

曹晓涛曾在《什么是robots文件,及robots.txt文件的格式和用法》一文中跟大家一起研究了robots.txt文件的写法。因为不同CMS的机制略有区别,所以最终这个robots.txt文件还应该结合具体的CMS来写,今天曹晓涛跟大家一起研究下WordPress构建的网站中的robots.txt文件的正确写法。
Read More
今天曹晓涛给大家推荐的这个sitemap插件是国人柳城开发的Baidu Sitemap Generator,生成的sitemap.xml非常清爽直接,可以包含最近的1000个文章内容;另外这个插件可以生成一个sitemap.html的网站地图。sitemap.xml可以给搜索引擎看,sitemap.html则可以放在网站中给访问者查看!
Read More

你有什么想法,说出来我们才能知道!

请填写您的姓名. 请填写有效的电子邮箱. 请输入评论内容.