好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

animate.css结合jquery实现完美动画效果

css3带来了更炫的效果,虽然写动画有点麻烦,但还是得懂啦^_^

animate.css来自大牛Daniel Eden,这个css库实现包装了一堆酷炫的动画效果,而使用只需要设置类而已,大大简化了动画的使用。

Github项目地址:下载 Demo

使用方法

1、首先到官网下载文件,找到animate.min.css,引入文件:

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>


2、为元素添加动画类,具体看Demo,自行选择需要的效果,必须添加一个animated类和一个效果类例如bounceIn类:

<div id="demo" class="animated bounceIn">Animate.css Demo</div>

设置好动画类之后刷新即可查看效果,但是动画只能执行一次。


3、利用jquery配置,实现鼠标控制动画执行,其实需要不断得删除添加类:

<script>
$(document).ready(function(){
	$("#demo").mouseover(function(){
		$(this).addClass("animated swing");
	});	
	$("#demo").mouseleave(function(){
		$(this).removeClass("animated swing");
	});
});
</script>


注意事项

重点注意元素的位置属性,动画是利用元素的相对位置执行的,例如本站的导航的子菜单开始隐藏在left:-9999px;使用时需要设置left:auto;,才能正常看到动画。


所有完整的动画效果查看Demo,然后自己尝试一下吧。

点赞13
 标签: css css动画 animate.css
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘