模拟抛物线

本文链接： https://blog.csdn.net/qq_42565994/article/details/102733053
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>利用css模拟抛物线</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	</head>

	<style>
		#obj {
			position: absolute;
			left: 100px;
			top: 100px;
		}
		#inner{
			width:50%;
			height:50%;
			/*border:1px solid black;*/
			background: #ccc;
			position:absolute;
			top:0px;
			width: 100px;
			height: 100px;
		}
		#target {
			width: 10px;
			height: 10px;
			position: absolute;
			/*border:1px solid black;*/
			background: blue;
			left: 300px;
			top: 300px;
		}
		.move1{
			animation:parabola1 1s linear forwards;
			-webkit-animation:parabola1 1s linear forwards;
		}
		.move2{
			animation:parabola2 1s  ease-in forwards;
			-webkit-animation:parabola2 1s  ease-in forwards;
		}
		
		
		@keyframes parabola1{
			from{
				
				left:100px;
			}
			to{
				left:300px;
			}
		}
		@-webkit-keyframes parabola1{
			from{
				left:100px;
			}
			to{
				left:300px;
				
			}
		}
		
		@keyframes parabola2{
			from{
				top:0px;
			}
			to{
				top:200px;
				width:10px;
				height:10px;
				transform:rotate(720deg);
				-webkit-transform:rotate(720deg);
			}
		}
		@-webkit-keyframes parabola2{
			from{
				top:0px;
			}
			to{
				top:200px;
				width:10px;
				height:10px;
				transform:rotate(720deg);
				-webkit-transform:rotate(720deg);
			}
		}
		
	</style>

	<body>
		<div>
			<h4>利用css模拟抛物线</h4>
			<button id='start'>开始</button>
			<div id='obj'>
				<div id='inner' >
					
				</div>
			</div>
			<div id='target'></div>
		</div>
	</body>

	<script>
		document.addEventListener('DOMContentLoaded', function() {
		
			document.getElementById('start').addEventListener('click', function() {
				document.getElementById('obj').className='move1';
				document.getElementById('inner').className='move2';
			})
		});
	</script>

</html>
猜你喜欢
