CSS3 @keyframes动画

最新推荐文章于 2024-05-17 16:07:32 发布

每一天，每一步

最新推荐文章于 2024-05-17 16:07:32 发布

阅读量67

点赞数

分类专栏： HTML/CSS 文章标签： css3

本文链接：https://blog.csdn.net/u010234868/article/details/119739311

版权

CSS动画关键帧 JavaScript DOM操作按钮交互

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

HTML/CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: relative;
			/*animation: boxMove 5s infinite;*/
		}
		@keyframes boxMove {
			from {
				left: 0px;
			}
			to {
				left: 300px;
			}
		}
	</style>
</head>
<body>
	<input type="button" value="开始" id="btn">
	<div id="box"></div>

	<script>
		var btn = document.getElementById('btn');
		var box = document.getElementById('box');
		btn.onclick = function () {
			// box的横坐标逐渐增大 缓慢向右移动
			box.style.animation = 'boxMove 5s';
		}
		
	</script>
</body>
</html>