欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3的transition屬性詳解

  發(fā)布時(shí)間：2014-12-15 15:35:17   作者：佚名   我要評論
這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下

transition是將某個(gè)屬性從一個(gè)屬性值在指定的時(shí)間內(nèi)平滑過渡到另一個(gè)屬性值來實(shí)現(xiàn)動畫效果.
這個(gè)屬性一般搭配:hover來使

下面看一個(gè)例子:鼠標(biāo)放在div上,0.2s后將div元素的背景色用一秒的時(shí)間變成黃色,變化方式是linear


復(fù)制代碼
代碼如下:

div{ background-color:red; transition:background-color 1s linear 0.2s;}
div:hover{ background-color:yellow;}
<div>思思博士</div>


鼠標(biāo)沒放上去之前:

鼠標(biāo)放上去0.2s后 的變化過程:

鼠標(biāo)放上去的最終效果:

看到這里 大家對與這個(gè)屬性的用法,心里面應(yīng)該有了底了.

對于這個(gè)屬性,每個(gè)參數(shù)都有一個(gè)對應(yīng)的屬性名,也就是說這個(gè)屬性是可以拆開寫的.

非簡寫形式:


復(fù)制代碼
代碼如下:

/*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
div:hover{ background-color:yellow;}

transition還可以過渡多個(gè)效果.


復(fù)制代碼
代碼如下:

div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;}
div:hover{ background-color:yellow; color:#F00; height:100px;}

相關(guān)文章

最新評論