JS和CSS3结合实现简单的动画效果

最新推荐文章于 2024-08-26 09:08:39 发布

cw11lq

最新推荐文章于 2024-08-26 09:08:39 发布

阅读量319

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/shmilylqd/article/details/125535069

版权

JavaScript CSS3 动画效果过渡事件监听

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过JS和CSS3结合实现简单的动画效果：
在这里插入图片描述

下面展示代码。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#box{
			position: absolute;
			top: 100px;
			left: 100px;
			height: 100px;
			width: 100px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<button id="btn">开始运动</button>
	<div id="box">
		
	</div>
	<script type="text/javascript">
		var btn=document.getElementById('btn');
		var box=document.getElementById('box');
		var pos=1;
		var lock=true;
		btn.onclick=function(){
			if(!lock) return;

			box.style.transition='all 2s linear 0s';
			if(pos==1){
			box.style.left='1100px';
			pos=2;}
			else if(pos==2){
				box.style.left='100px';
				pos=1;
			}
			lock=false;
			setTimeout(function(){

            lock=true;
			},2000);

		};
	</script>

</body>
</html>