realización de css unirse a la animación del carrito de compras (parábola horizontal)

 

En el proyecto de práctica de Vue, me encontré con un problema de animación: cuando me uní al carrito de compras, hubo una animación que se lanzó desde la parte superior izquierda hacia la parte inferior.

 

<! DOCTYPE html > 
< html lang = "en" style = "ancho: 100%; altura: 100%;" > 
< head > 
    < meta charset = "UTF-8" > 
    < meta name = "viewport" content = "width = device-width" > 
    < style > 
        * { 
            padding : 0 ; 
            margen : 0 ; 
        } 
        #ball { 
            ancho :
            altura : 12px ; 
            fondo : # 5EA345 ; 
            radio de borde : 50% ; 
            posición : fija ; 
            transición : izquierda 1s lineal, top 1s facilidad ; 
        } 
    </ style > 
    < title > CSS3 水平 抛物线 动画</ title > 
</ head > 
< body style = "ancho: 100%; altura: 100%;" > 
    < div id = "bola" > </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 easy-in ' ; 
        }, 20 ) 
    } 
</ script >

 

 

Cambié un efecto yo mismo

<! DOCTYPE html > 
< html lang = "en" style = "ancho: 100%; altura: 100%;" > 
< head > 
    < meta charset = "UTF-8" > 
    < meta name = "viewport" content = "width = device-width" > 
    < style > 
        * { 
            padding : 0 ; 
            margen : 0 ; 
        } 
        .ball { 
            ancho :
            altura : 12px ; 
            fondo : # 5EA345 ; 
            radio de borde : 50% ; 
            posición : fija ; 
            arriba : 30px ; 
            izquierda : 30 px ; 
    
        } 

        .ball_hover {     
            top : 300px ; 
            izquierda : 300 px ; 
            transición : izquierda 1s lineal, top 1s facilidad ; 
            ancho :12px ; 
            altura : 12px ; 
            fondo : # 5EA345 ; 
            radio de borde : 50% ; 
            posición : fija ; 
            fondo : rojo ; 
 

        } 
    </ style > 
    < title > CSS3 动画 向 鼠标 移动</ title > 
</ head > 
< body style = "ancho: 100%; altura: 100%;" > 
    < div id = clase "ball"= "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 = "; 
    } 
</ script >

 

 

 

 

 

 

Gire: https://blog.csdn.net/XU441520/article/details/94050782