首页 > Web开发 > 详细

css3 cubic-bezier用赛贝尔曲线定义速度曲线

时间:2017-09-24 00:02:13      阅读:554      评论:0      收藏:0      [点我收藏+]

简介

      cubic-bezier 又称三次贝塞尔,用四个点(p0,p1,p2,p3)描绘一条曲线。

     p0默认为(0,0),p3默认为(1,1)。所以,我们只需关注p1,p2。

       在css3动画中,用来表示速度曲线。

  关于三次赛贝尔曲线:

    公式:技术分享

    想了解三次赛贝尔曲线,自行百度。

    不想了解可以在这个网站上直接调节:http://www.roblaplaca.com/examples/bezierBuilder/#  得到参数。

    网站进入较慢,需要等一会。

作用

        在CSS3 中的动画效果中,设置速度运动曲线。

      animation-timing-function: cubic-bezier(x1,y1,x2,y2);

使用

  默认ease:

     技术分享

  ease-in:

      技术分享

  ease-out:

      技术分享

  ease-in-out:

        技术分享

  linear:

        技术分享

后语

    斜率表示速度的快慢,可以去上面的网站自己调,能实现各种效果。

   比如说这个,就可以在中间停一会:

    技术分享

 

 

    

 

css3 cubic-bezier用赛贝尔曲线定义速度曲线

原文:http://www.cnblogs.com/seeks/p/7583484.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!