首页 > Web开发 > 详细

css3 transform的基本用法和介绍

时间:2016-10-04 11:51:10      阅读:270      评论:0      收藏:0      [点我收藏+]

<style>
/* 最简单的一个transition动画
.box{width:100px;height:100px;border:1px solid;background:green;-webkit-transition:3s;}
.box:hover{width:200px;height:200px;background:pink;} */

/* transition宽度需要3s,背景需要5s
.box{width:100px;height:100px;border:1px solid;background:green;-webkit-transition:3s width,background 5s;}
.box:hover{width:200px;height:200px;background:pink;} */


/* transition宽度3s完成,高度5秒开始,2秒完成
.box{width:100px;height:100px;border:1px solid;background:green;-webkit-transition:3s width,height:5s 2s;}
.box:hover{width:200px;height:200px;background:pink;} */

 

/*贝塞尔可以自定义(https://matthewlein.com/ceaser/)曲线过渡 由慢到快 */
.box{
width:100px;height:100px;border:1px solid #000;background:red;
transition:5s background;transition:2s width;

-webkit-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, 0);
-webkit-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
-moz-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
-o-transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
transition: all 500ms cubic-bezier(0.570, 0.070, 1.000, -0.075);
}
.box:hover{
background:blue;
width:200px;
height:200px;
}

</style>

css3 transform的基本用法和介绍

原文:http://www.cnblogs.com/cuidan9495/p/5930146.html

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