css实现加入购物车动画（水平抛物线）

在做Vue的练习项目中，遇到了一个动画问题，在做加入购物车时，有个从左上往下抛的动画，当时没有思绪，后来得强哥指导。

<!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.left = '0px';
            $ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 20)
    }
</script>

我自己改了一个效果

<!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;
            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="width: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

css实现加入购物车动画（水平抛物线）

猜你喜欢