js添加购物车抛物线动画效果

最新推荐文章于 2024-09-05 23:05:05 发布

拾-伍

最新推荐文章于 2024-09-05 23:05:05 发布

阅读量1.3k

点赞数 5

本文链接：https://blog.csdn.net/yhr0322/article/details/102593902

版权

电商必备—抛物线动画

废话少说直接上代码！！！

主要是通过event对象获取鼠标当前点击位置

然后css3—》 transition: left 1s linear, top 1s ease-in;

实现抛物线（小球移动时向右和向上的速度不一致，一个快一个慢，从而实现抛物线）关于这个文章中css3中的linear和 ease-in**
在下一篇文章中小编拾伍会做详细介绍的，可以关注我的博客，浏览更多前端文章，**

尽我所能，解你所难！！！

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