蓝叶博客

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > 网站设计 > 使用animate动画库添加鼠标经过动画

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

蓝叶    网站设计    2016-11-27    141    0评论    已收录
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>
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

扫码赞助蓝叶
联系站长
蓝叶博客
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航返回顶部
你问我答
技术QQ群
音乐QQ群
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部