这个是很简单的一种方式,利用了css3的transition属性
<!DOCTYPE html> <html lang="en" style="100%;height:100%;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <style> * { padding: 0; margin: 0; } #ball { 12px; height:12px; background: #5EA345; border-radius: 50%; position: fixed; transition: left 1s linear, top 1s ease-in; } </style> <title>CSS3 水平抛物线动画</title> </head> <body style="100%;height:100%;"> <div id="ball"></div> </body> <script> var $ball = document.getElementById('ball'); document.body.onclick = function (evt) { console.log(evt.pageX,evt.pageY) $ball.style.top = evt.pageY+'px'; $ball.style.left = evt.pageX+'px'; $ball.style.transition = 'left 0s, top 0s'; setTimeout(()=>{ $ball.style.top = window.innerHeight+'px'; $ball.style.left = '0px'; $ball.style.transition = 'left 1s linear, top 1s ease-in'; }, 20) } </script> </html>