使用animate动画库添加鼠标经过动画
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>
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶》。
- 本文网址:https://lanye.org/web/animate.html
- 上篇文章:2016年11月必应壁纸打包下载
- 下篇文章:新版QQ互联如何申请QQ登陆APPID和APPKEY

小王2020-01-10 14:22回复
#4
感谢分享,十分感谢

Amumu2019-05-10 13:44回复
#3
成功了,感谢分享

艾尚网络2017-10-24 15:06回复
#2
我也试试。。

卢松松博客2017-01-07 14:02回复
#1
感谢分享,试试