css3 transition 原
css3 transition 需要4个参数 transition-property, transition-duration, transition-timing-function, and transition-delay。 参数意思：（1）指定要添加效果的css属性 （2）持续时间 （3）效果的转速曲线（4）推迟执行的时间
其中第三个参数transition-timing-function主要有 1、linear：匀速 2、ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 3、ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 4、ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 5、ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
列子
<div class="box">
<div class="outopen">
<span>close</span>
<div class="openTwo"></div>
</div>
</div> <style type="text/css">
.outopen{width: 100px;height: 50px;border-radius: 25px;position: relative;background: rgba(0,184,0,0.8); transition: all .3s ease-in-out;}
.outopen span{line-height: 50px;color: #fff;padding-left: 12px;font-size: 14px;text-shadow:2px 1px 2px rgba(36,102,6,1.0);font-family:"Arial";}
.openTwo{width: 50px;height: 50px;border-radius: 50%;position: absolute;box-shadow: 0px 2px 4px rgba(0,0,0,0.4);background: #fff;top: 0px;left: 50px;cursor: pointer;transition: left .3s ease-in-out;}
.box.active .outopen{box-shadow: 0px 0px 4px rgba(0,0,0,0.4);background: #fafafa;}
.box.active .openTwo{left: 0px;}
.box.active .outopen span{color: #666;padding-left: 58px;text-shadow:0px 1px 0px rgba(0,0,0,0.4)}
</style> <script type="text/javascript">
$(function(){
var b1=true;
$(".box").click(function(){
$(".box").toggleClass("active");
if(b1==true){
$(".outopen span").text("open");
b1=false;
}else{
$(".outopen span").text("close");
b1=true;
}
});
})
</script>(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016/08/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读