标签：style java color io width c cti html
12.2 CSS3提供的Transition动画
CSS3提供了Transition动画支持，Transition动画可以控制HTML组件的某个
属性发生改变时会经历一段时间、以平滑渐变的方式发生改变，这就产生了动画效果。
Transition动画通过transition属性来指定。transiton属性的值包括如下4个部分。
Transition-property：指定对HTML元素的哪个CSS属性进行平滑渐变处理。该
属性可以指定background-color、width、height等各种
标准的CSS属性。
Transition-duration：指定属性平滑渐变的持续时间。
Transition-timing-function：指定渐变的速度。该部分支持如下几个值。
ease：动画开始时较慢，然后速度加快，该部分支持如下几个值。
linear：线性速度。动画开始时的速度到结束时的速度保持不变。
ease-in：动画开始时速度较慢，然后速度加快。
ease-out：动画开始时速度很快，然后速度减慢。
ease-in-out：动画开始时速度慢，然后速度加快，到达最大速度后再减慢速度。
cubic-bezier(x1,y1,x2,y2)：通过贝济埃曲线来控制动画的速度。该属性值完
全可以代替ease、linear、ease-in、ease-out、
等属性值。
transition-delay：指定延迟时间，也就是指定经过多长时间的延迟才会开始执行平滑渐变。
代码示范：
//设置当该元素背景色改变时执行渐变效果
div{
width:100px;
height:100px;
border:1px solid;
transition:background-color 4s linear;
}
//设置鼠标移到该元素上时改变该元素的背景色
div:hover{
background-color:yellow;
}
如要设置多种渐变效果，则用,号隔开。
代码示范：
//设置当该元素的left属性与top属性改变时执行渐变效果
#div1{
width:100px;
height:100px;
border:1px solid;
transition:left 5s linear,top 5s linear;
}
javascript代码：
//为鼠标按下事件绑定监听器
//获取执行渐变效果的元素
var itemDiv = document.getElementById("div1");
//记录div1元素的left属性。
itemDiv.style.left = "0px";
//记录div1元素的top属性。
itemDiv.style.top = "0px";
document.onmousedown = function(evt){
//将当前鼠标按下时的x坐标赋给div1元素的left属性改变其属性值与位置
target.style.left = evt.pageX + "px";
//将当前鼠标按下时的y坐标赋给div1元素的top属性改变其属性值与位置
target.style.top = evt.pageX + "px";
}
7月24号=》266页-270页,布布扣,bubuko.com
标签：style java color io width c cti html
原文地址：http://www.cnblogs.com/duzuoyan/p/3866386.html
