在做Vue的练习项目中，遇到了一个动画问题，在做加入购物车时，有个从左上往下抛的动画，当时没有思绪，后来得强哥指导。
<!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 { 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="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>
我自己改了一个效果
<!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 { width:12px; height:12px; background: #5EA345; border-radius: 50%; position: fixed; top:30px; left: 30px; } .ball_hover { top:300px; left:300px; transition: left 1s linear, top 1s ease-in; width:12px; height:12px; background: #5EA345; border-radius: 50%; position: fixed; background: red; } </style> <title>CSS3 动画向鼠标移动</title> </head> <body style="100%;height:100%;"> <div id="ball" class="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.className="ball_hover"; } </script>
转 : https://blog.csdn.net/XU441520/article/details/94050782