css3画抛物线(三次贝塞尔曲线)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        .toCart{
            position: fixed;
            top: 200px;
            left: 0;
            will-change: transform;/*告诉浏览器提前做好适当的优化,使之最后能够快速和流畅的渲染。*/
            transform: translate3d(0, 0, 0);
        }
        .toCart .toCarts{
            position:absolute;
            z-index:999;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            background-color: #FF5B1E;
            border-radius: 50%;
        }
        .start{
            transition: transform 2s linear;
            transform: translate3d(400px,0,0);
           
        }
        .start .toCarts{
            transition: transform 2s cubic-bezier(.3,-0.2,1,0);/*贝塞尔曲线 抛物线 用来描述transform的运动曲线*/
            transform: translate3d(0,500px,0);
        }
       
        </style>
    </head>
    <body>
    <div class="toCart">
        <div class="toCarts"></div>
    </div>
    <button id="go">开始动画</button>
    </body>
    <script>
        document.getElementById('go').onclick = function(){

            document.querySelector('.toCart').className = 'toCart start';

            setTimeout(function(){
                document.querySelector('.toCart').className = 'toCart';
            },2e3)
        }
   
    </script>
</html>

贝塞尔曲线参数在线生成工具
参考文章:
实用的 CSS — 贝塞尔曲线(cubic-bezier)
张鑫旭-贝塞尔曲线与CSS3动画、SVG和canvas的基情
关于CSS的will-change属性的介绍
will-change MDN
查看demo
下载源码

发表评论

电子邮件地址不会被公开。 必填项已用*标注