美文网首页小码农养成记
在 Chrome 下调试贝塞尔曲线

在 Chrome 下调试贝塞尔曲线

作者: F_wind | 来源:发表于2021-10-29 10:51 被阅读0次

    chrome、css、cubic-bezier

    什么是贝塞尔曲线

    贝塞尔曲线是应用于二维图形应用程序中的数学曲线,其由起点、终点和中间的控制点组成,通过控制点可以改变曲线的形状。

    贝塞尔曲线在 CSS 中的应用

    在 CSS 中可以通过贝塞尔曲线来控制页面元素的动画效果,比如下面这个例子(本例来自 w3school):

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
      width: 100px;
      height: 100px;
      background: red;
      transition: width 2s;
      transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
    }
    
    div:hover {
      width:300px;
    }
    </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    

    展示效果:

    css-贝塞尔曲线动画.gif

    在 chrome 中调试贝塞尔曲线

    在 chrome 中可以灵活的调试贝塞尔曲线的动画效果:
    ease-in-out

    ease-in-out.gif
    fast-out
    fast-out.gif
    ease-out
    ease-out.gif
    others
    others.gif
    diy
    diy.gif

    相关文章

      网友评论

        本文标题:在 Chrome 下调试贝塞尔曲线

        本文链接:https://www.haomeiwen.com/subject/jkrialtx.html