30 04 2021

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

在模版文件头部添加animate.min.css的调用。或者也可以直接使用七牛静态库的地址。然后在css文件里写上鼠标经过的样式,举个例子,比如.logo是你的logo层样式名,代码如下,swing为动画库动画的名称:
.logo:hover{-webkit-animation-name:swing;animation-name:swing;}
最后在需要的地方调用,例如在样式名为.logo的层上面设置鼠标经过效果,要记住加上animated样式名
发表评论