标签：enter func wing 效果 style 代码 简单 link 鼠标
注：图片默认是不动的，当鼠标经过的时候才会动。
原理很简单--通过js，添加鼠标经过事件，鼠标经过时，把当前元素存放在“data-in”里的“swing”添加到class里，前提animated这个类一定要加上，要不然动画不起作用。
1、引入animate.css
<link href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">
2、js代码
$(".hover_").on("mouseenter",function(e){
var This=$(this);
var hin=This.attr("data-in");
This.addClass(hin);
This.one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd
oanimationend animationend‘, function(){
$(this).removeClass(hin);
});
});
3、使用示例
<img class="animated hover_" data-in="swing" src="https://img.alicdn.com/tps/ TB1_R_pKpXXXXauXXXXXXXXXXXX-406-396.png">
TIP：当然也可以自己编写动画的css
标签：enter func wing 效果 style 代码 简单 link 鼠标
原文地址：https://www.cnblogs.com/mankii/p/10369081.html
