示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哈哈哈</title>
    <style>
        .cus-warp {
            position: relative;
            height: 400px;
        }

        .add-car {
            position: absolute;
            top: 50px;
            right: 400px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }

        .cus-car {
            position: absolute;
            bottom: 50px;
            left: 400px;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 5px;
            background: #67acfd;
            color: #fff;
        }

        .cus-icon-warp {
            position: absolute;
            left: var(--left);
            top: var(--top);
            animation: moveY 0.5s cubic-bezier(0.42, -0.8, 0.83, 0.84);
        }
        
        .cus-icon {
            line-height: 18px;
            display: inline-block;
            border-radius: 5px;
            width: 18px;
            height: 18px;
            background: #67acfd;
            color: #fff;
            text-align: center;
            animation: moveX 0.5s linear;
        }


        @keyframes moveY {
            to{
                transform: translateY(var(--y));
            }
        }
        @keyframes moveX {
            to{
                transform: translateX(var(--x));
            }
        }
    </style>
</head>

<body>
    <div class="cus-warp">
        <button class="add-car" id="btn">加入购物车</button>
        <div class="cus-car" id="car">购物车</div>

        <!-- <div class="cus-icon-warp" style="--left: 300px; --top: 300px; --y:400px; --x:400px;">
            <div class="cus-icon">+</div>
        </div> -->
    </div>

    <script>
        const ICON_SIZE = 18;
        const btn = document.getElementById('btn');
        const car = document.getElementById('car');
        const carRect = car.getBoundingClientRect();
        const btnRect = btn.getBoundingClientRect();

        btn.onclick = function () {
            const div = document.createElement('div');
            div.className = 'cus-icon-warp';
            div.innerHTML = `<div class="cus-icon">+</div>`;

            const left = btnRect.left + btnRect.width / 2 - ICON_SIZE / 2;
            const top = btnRect.top - ICON_SIZE;
            const x = carRect.left + carRect.width / 2 - ICON_SIZE / 2 - left;
            const y = carRect.top - ICON_SIZE - top;

            div.style.setProperty('--left', `${left}px`);
            div.style.setProperty('--top', `${top}px`);
            div.style.setProperty('--x', `${x}px`);
            div.style.setProperty('--y', `${y}px`);

            div.addEventListener('animationend',()=>{
                div.remove();
            });

            document.body.appendChild(div);
        }
    </script>
</body>

</html>

效果展示

购物车
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 示例代码
  2. 2. 效果展示