Skip to content

Commit 4f2df9f

Browse files
author
yangxi
committed
animate.css
前端特效
1 parent ed2c93f commit 4f2df9f

36 files changed

+3781
-3815
lines changed

‎animate.css/.idea/.name‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

scroll/.idea/scroll.iml renamed to animate.css/.idea/animate.css.iml

File renamed without changes.

‎animate.css/.idea/encodings.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css/.idea/misc.xml‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css/.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css/.idea/workspace.xml‎

Lines changed: 291 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎animate.css/1.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
<link rel="stylesheet" href="css/animate.min.css">
7+
<style>
8+
*{
9+
margin: 0;
10+
padding: 0;
11+
}
12+
#login{
13+
width: 300px;
14+
height: 300px;
15+
border: 1px solid red;
16+
}
17+
.animated.tada{
18+
-webkit-animation-duration:.3s; /*可以在这里改动画的持续时间，延迟时间和执行次数等*/
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div id="login">
24+
<input type="text">
25+
<button>登录</button>
26+
</div>
27+
</body>
28+
<script src="js/jquery-1.9.1.min.js"></script>
29+
<script>
30+
// git地址：https://github.com/daneden/animate.css
31+
$('button').on('click',function(){
32+
var $login=$('#login');
33+
var name= $.trim($('input').val());
34+
if(name==''){
35+
$login.addClass('animated tada').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
36+
$(this).removeClass('animated tada');
37+
}); //one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){}相当于回调
38+
}
39+
});
40+
</script>
41+
</html>

0 commit comments

Comments
 (0)