版权声明：欢迎评论、补充；24小时内回复；及时更新；欢迎转载。 https://blog.csdn.net/li905663280/article/details/84866762
####js震动动画
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
<style type="text/css">
.container {
height: 300px;
position: relative;
width: 1000px;
background-color: yellow
}
#block {
height: 10px;
width: 10px;
position: absolute;
top: 0px;
left: 0px;
background-color: black;
}
</style>
<script type="text/javascript">
function animate(e,time,width){
var start=(new Date()).getTime();
function move(){
var now=(new Date()).getTime();
var diff=now-start;
var fraction=diff/time; //总时间的几分之几
if(fraction<1) {
//绘画未完成
if(fraction<0.5){
e.style.left=(fraction)*width+"px";
}else if(fraction>=0.5){
e.style.left=(width/2-(fraction-0.5)*width)+"px";
}
setTimeout(move,Math.min(25,time-diff));
}else{
animate(window.document.getElementById("block"),500,500);
}
}
move();
}
var show=function(){
animate(window.document.getElementById("block"),500,500);
};
</script>
</head>
<body>
<button id="show" onclick="show()">
动画
</button>
<div class="container">
<div id="block">
</div>
</div>
</body>