<!DOCTYPE html>
<html>
<head>
<title>CSS3 水平抛物线动画</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
* {
padding: 0;
margin: 0;
}
html,body {
width: 100%;
height: 100%;
}
#ball {
display: none;
width:10px;
height:10px;
background: red;
border-radius: 50%;
position: fixed;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
var ball = document.getElementById('ball');
document.body.onclick = function(e) {
ball.style.top = e.pageY + 'px';
ball.style.left = e.pageX + 'px';
ball.style.transition = 'left 0s, top 0s';
ball.style.display = 'block';
setTimeout(function(){
ball.style.top = window.innerHeight + 'px';
ball.style.left = '0px';
ball.style.transition = 'left 1s linear, top 1s ease-in';
}, 20)
}
评论区