realização css juntar animação de carrinho de compras (parábola horizontal)

 

No projeto de prática do Vue, encontrei um problema de animação: quando entrei no carrinho de compras, havia uma animação lançada da parte superior esquerda para a parte inferior.

 

<! DOCTYPE html > 
< html lang = "pt" style = "width: 100%; height: 100%;" > 
< head > 
    < meta charset = "UTF-8" > 
    < meta name = "viewport" content = "width = largura do dispositivo" > 
    < style > 
        * { 
            padding : 0 ; 
            margem : 0 ; 
        } 
        #ball { 
            width :
            altura : 12px ; 
            fundo : # 5EA345 ; 
            raio da borda : 50% ; 
            posição : fixa ; 
            transição : 1s à esquerda linear, 1s mais fáceis ; 
        } 
    </ style > 
    < title > CSS3 动画 抛物线 动画</ title > 
</ head > 
< body style = "largura: 100%; altura: 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 =  ' 0s esquerdo, 0s superiores ' ;
        setTimeout (() => { 
            $ ball.style.top = window.innerHeight + ' px ' ; 
            $ ball.style.left =  ' 0px ' ; 
            $ ball.style.transition =  ' deixou 1 linear, os 1 primeiros com facilidade ' ; 
        }, 20 ) 
    } 
</ script >

 

 

Eu mesmo mudei um efeito

<! DOCTYPE html > 
< html lang = "pt" style = "width: 100%; height: 100%;" > 
< head > 
    < meta charset = "UTF-8" > 
    < meta name = "viewport" content = "width = largura do dispositivo" > 
    < style > 
        * { 
            padding : 0 ; 
            margem : 0 ; 
        } 
        .ball { 
            width :
            altura : 12px ; 
            fundo : # 5EA345 ; 
            raio da borda : 50% ; 
            posição : fixa ; 
            superior : 30 px ; 
            esquerda : 30px ; 
    
        } 

        .ball_hover {     
            top : 300px ; 
            esquerda : 300 px ; 
            transição : 1s à esquerda linear, 1s mais fáceis ; 
            largura :12px ; 
            altura : 12px ; 
            fundo : # 5EA345 ; 
            raio da borda : 50% ; 
            posição : fixa ; 
            fundo : vermelho ; 
 

        } 
    </ style > 
    < title > CSS3 </ title > 
</ head > 
< body style = "width: 100%; height: 100%;" > 
    classe < div id = "ball"= "bola" > </ div > 
</ corpo > 
< script > 
    var $ ball = document.getElementById ( ' bola ' ); 
    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 >

 

 

 

 

 

 

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