您的位置：首页 > 其它

cubic-bezier贝塞尔曲线函数

2015-11-16 14:19 169 查看
timing-function算是Transition属性中最为复杂的一个了。它针对了过渡效果的特效，有多种特效展示。

通常我们常用的如下：

    ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

    linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

    ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

    ease-out: cubic-bezier(0, 0, 0.58, 1.0)

    ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

来个小例子看看：

代码：<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cubic-bezier贝塞尔曲线函数</title>
<style type="text/css">
.demo{margin:20px auto;border:1px solid #78ab43;width:800px;height:40px;position:relative}
.demo div{width:40px;height:40px;background:#78ab43;position:absolute;top:0;left:40px;margin-left:-40px}
.demo p{margin:0;padding:0;height:40px;line-height:40px;position:absolute;top:0;left:200px;color:#f05b34;font-weight:bold}
.btn a{margin:10px auto;display:block;width:100px;height:30px;line-height:30px;text-align:center;border:1px solid #78ab43;color:#555;text-decoration:none}
</style>
</head>
<body>

<div class="demo demo01">
<p>all 1s cubic-bezier(0,0,1,1)</p><div></div>
</div>
<div class="demo demo02">
<p>all 1s cubic-bezier(0.5,0,0.5,1)</p><div></div>
</div>
<div class="demo demo03">
<p>all 1s cubic-bezier(0,0.5,1,0.5)</p><div></div>
</div>
<div class="demo demo04">
<p>all 1s cubic-bezier(0,0,1,1.5)</p><div></div>
</div>
<div class="demo demo05">
<p>all 1s cubic-bezier(0,-1,1,1)</p><div></div>
</div>

<div class="btn btn01">
<a href="javascript:void(0)">开始运动</a>
</div>
<div class="btn btn02">
<a href="">刷新重置</a>
</div>

<script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$('.btn01 a').on('click',function(){
for(i=1;i<=$('.demo').length;i++){
$('.demo0'+i+' div').css({"transition":$('.demo0'+i+' p').text(),"left":"100%"});
}
});
</script>
</body>
</html>

demo地址：http://test.ixiewei.com/cubic-bezier/

参考地址：http://cubic-bezier.com/（可以自由设定各种运动轨迹）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  cubic-bezier 贝塞尔曲线函数
相关文章推荐
新的分享
章节导航