模拟抛物线
程序员文章站
2024-03-25 12:33:40
...
<!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>
上一篇： js抛物线