使用animate动画库添加鼠标经过动画

作者：蓝叶分类：网站设计时间：2016-11-27 浏览：13821 评论：4

animate是一个css3动画库，使用它简单几步就能很轻松的为网站增加各种动画效果；今天蓝叶讲的是如何使用animate动画库添加鼠标经过动画，首先需要站长下载animate动画库文件，通过FTP上传到网站主机里，然后在页面模版上引用，演示可以用鼠标悬停在本站的LOGO上面看效果。

在模版文件头部添加animate.min.css的调用。 
<link href="文件存放路径/animate.min.css" rel="stylesheet" />
或者也可以直接使用七牛静态库的地址。
<link href="http://cdn.staticfile.org/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
然后在css文件里写上鼠标经过的样式，举个例子，比如.logo是你的logo层样式名，代码如下，swing为动画库动画的名称：
.logo:hover{-webkit-animation-name:swing;animation-name:swing;}
最后在需要的地方调用，例如在样式名为.logo的层上面设置鼠标经过效果，要记住加上animated样式名，示例代码如下：
<div class="logo animated"></div>

免责声明：

本页网址：点击复制分享给朋友吧！

本站分享的一切内容资源如若没有备注，均为蓝叶原创，如需转载请注明出处；如有侵权请与我们联系处理。敬请谅解！