鼠标点击按钮产生动画效果jQuery
1、新建html文档。
2、书写hmtl代码。
<div id="heading"> <br>
<br>
<br>
<h1>鼠标点击按钮产生动画效果jQuery特效</h1>
</div>
<div style="margin-top:70px; text-align:center"> <a id="btn" class="button" href="#">Default mation</a> <br>
<br>
<br>
<br>
<br>
<a id="btn2" class="button" href="#">Tick Animation</a> <a id="btn3" class="button" href="#">Cross mation</a> <br>
<br>
<br>
<br>
<br>
<a id="btn4" class="button" href="#">Signal Animation</a> <a id="btn5" class="button" href="#">Shoot mation</a> </div>
3、书写css代码。
@font-face { font-family: "Montserrat"; src: url('../fonts/Montserrat.otf'), url('../fonts/Montserrat.otf'); /* IE */ }
body { height: 100%; margin: 0; padding: 0; font-family: Montserrat; text-align: center; background-color: rgb(0,51,51); overflow-x: hidden; }
#menu { background-color: rgb(0,0,0); text-align: left; color: rgb(204,204,204); padding: 10px; padding-left: 40px; }
#menu a { padding-left: 20px; padding-right: 20px; text-decoration: none; color: rgb(204,204,204); }
#footer { width: 100%; position: fixed; bottom: 0; background-color: rgb(0,0,0); text-align: center; font-size: 10px; color: rgb(204,204,204); padding: 5px; }
#heading { color: rgb(255,255,255); }
.button { width: 100px; color: rgb(255,255,255); border: rgb(255,255,255) solid; border-radius: 15px; padding: 15px; text-decoration: none; }
.button:hover { background-color: rgb(255,255,255); color: rgb(51,51,51); transition: ease-in-out .5s; }
4、书写并添加js代码。
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/animateClick.js"></script>
<script>
$(document).ready(function() {
$('#btn').an imateClick({
"color":"black"
});
$('#btn2').ani mateClick({
"color":"green",
"ani mation":"tick"
});
$('#btn3').ani mateClick({
"color":"red",
"animation":"cross"
});
$('#btn4').ani mateClick({
"color":"grey",
"animation":"signal"
});
$('#btn5').mateClick({
"color":"lightblue",
"mation":"shoot"
});
});
</script>
5、代码整体结构。
6、查看效果。
