网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

css3贝塞尔曲线函数有哪些参数

本篇内容主要讲解“css3贝塞尔曲线函数有哪些参数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3贝塞尔曲线函数有哪些参数”吧!

专注于为中小企业提供成都网站制作、网站设计、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业雁峰免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

css3贝塞尔曲线函数cubic-bezier()有4个参数,分别指定曲线两个相互分离的中间点的坐标,语法为“cubic-bezier(x1,y1,x2,y2)”;参数x1、y1、x2、y2的取值范围为0到1。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3贝塞尔曲线(cubic-bezier)

cubic-bezier 又称三次贝塞尔,主要是为 animation 生成速度曲线(贝塞尔曲线)的函数,是 animation-timing-function 和 transition-timing-function 中的一个重要值。

语法:

cubic-bezier(x1,y1,x2,y2)

我们来看图说话:

css3贝塞尔曲线函数有哪些参数

从上图我们可以明确的知道 cubic-bezier 的取值范围:

  • p0:默认值(0,0)

  • p1:取值(x1,y1)

  • p2:取值(x2,y2)

  • p3:默认值(1,1)

在 cubic-bezier 中,p0和p3是默认的点,所以我们只需要定义p1和p2两个点,同时x1、y1、x2、y2的取值范围为[0,1]

注意:当取值超出范围时, cubic-bezier 就会失效。

在CSS3的动画中,有几个常用的固定值。

  • ease: cubic-bezier(.25, .1, .25, 1)

  • linear: cubic-bezier(0, 0, 1, 1)

  • ease-in:cubic-bezier(.42,0,1,1)

  • ease-out:cubic-bezier(0,0,.58,1)

  • ease-in-out:cubic-bezier(.42,0,.58,1)

ease: cubic-bezier(.25, .1, .25, 1)

css3贝塞尔曲线函数有哪些参数

linear: cubic-bezier(0, 0, 1, 1)

css3贝塞尔曲线函数有哪些参数

ease-in:cubic-bezier(.42,0,1,1)

css3贝塞尔曲线函数有哪些参数

ease-out:cubic-bezier(0,0,.58,1)

css3贝塞尔曲线函数有哪些参数

ease-in-out:cubic-bezier(.42,0,.58,1)

css3贝塞尔曲线函数有哪些参数

到此,相信大家对“css3贝塞尔曲线函数有哪些参数”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


网站题目:css3贝塞尔曲线函数有哪些参数
本文URL:http://bjjierui.cn/article/gjhcec.html

其他资讯