主要是通过event对象获取鼠标当前点击位置
然后css3—》 transition: left 1s linear, top 1s ease-in;
实现抛物线（小球移动时向右和向上的速度不一致 ，一个快一个慢，从而实现抛物线）关于这个文章中css3中的linear和 ease-in**
<!DOCTYPE html><html lang="en" style="width:100%;height:100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><style>* {padding: 0;margin: 0;}#ball {width: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="width: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.top = '0px';$ball.style.left = '900px';$ball.style.transition = 'left 1s linear, top 1s ease-in';}, 20)}</script></html>
