JS简单实现抛物线Transition动画效果

最新推荐文章于 2023-02-10 14:55:45 发布

屁桃恒

最新推荐文章于 2023-02-10 14:55:45 发布

阅读量801

点赞数

分类专栏： css3动画

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

版权

css3动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要是通过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>

屁桃恒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS简单实现抛物线Transition动画效果

主要是通过event对象获取鼠标当前点击位置然后css3—》 transition: left 1s linear, top 1s ease-in;实现抛物线（小球移动时向右和向上的速度不一致，一个快一个慢，从而实现抛物线）关于这个文章中css3中的linear和 ease-in**<!DOCTYPE html><html lang="en" style="width:...
复制链接

扫一扫