css實現加入購物車動畫（水平拋物線）

本文轉載自查看原文 2020-04-21 18:04 1939 html5/ 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js加入購物車拋物線動畫 js加入購物車拋物線動畫基於jquery fly插件實現加入購物車拋物線動畫效果,jquery.fly.js js拋物線動畫——加入購物車動效小程序購物車拋物線動畫（通用） jQuery.animate()實現的購物車拋物線 Android 利用二次貝塞爾曲線模仿購物車加入物品拋物線動畫 jQuery.fly插件實現添加購物車拋物線效果 Vue實現購物小球拋物線如何用css實現拋物線