要在網(wǎng)頁中實(shí)現(xiàn)動畫效果他必須有三要數(shù)；

1；元素的屬性值要有變化；

2；要告訴系統(tǒng)那個元素的那個屬性要變化；transition-property: widht,height,background-color;

3；要告訴系統(tǒng)這個變化過程要持續(xù)多長時間；transition-duration: 2s,2s,2s;

注意過度動畫的4種屬性

1；/*告訴系統(tǒng)那些屬性要執(zhí)行動畫*/

? ? ? ? ? ? ? ? transition-property:widht,height,background-color;

2；/*告訴系統(tǒng)執(zhí)行動畫的時長*/

? ? ? ? ? ? ? ? ? transition-duration:2s,2s,2s;

3；/*延時多少時間才開始執(zhí)行動畫*/

? ? ? ? ? ? ? ? ? ?transition-delay:2s;

4；/*動畫在執(zhí)行動畫過程的速度*/

? ? ? ? ? ? ? ? ? transition-timing-function:ease;

下面是一個手風(fēng)琴效果

? ? ? ? ? ?*{

margin:0;

? ? ? ? ? ? padding:0;}

/*注意這里一定要清空默認(rèn)的邊距，不然左邊有一個空隙，把盒子撐開了*/

? ? ? ? ul{

? ? ? ? ? width:1000px;

? ? ? ? ? ? height:500px;

? ? ? ? ? ? border:1px solid #000;

? ? ? ? ? ? margin:100px auto; ? //這一句是讓元素ul居中顯示

? ? ? ? ? ? list-style:none; ? ? ? ?//這一句是去掉li前面的小遠(yuǎn)點(diǎn)

? ? ? ? }

ul li{

? ? ? ? ? ?width:200px;

? ? ? ? ? ? height:500px;

? ? ? ? ? ? border:1px solid #bb07ff;

? ? ? ? ? ? box-sizing:border-box; ?//設(shè)置邊框不占元素位置

? ? ? ? ? ? float:left; ? ? //因?yàn)閘i是塊級元素；用浮動讓他水平顯示

? ? ? ? ? ? transition:width 0.2s; ? ? // 設(shè)置動畫效果

? ? ? ? }

ul li:nth-child(1){

background-color:#27e059;

? ? ? ? ? ? }

ul li:nth-child(2){

background-color:#ff4470;

? ? ? ? }

ul li:nth-child(3){

background-color:#0066b8;

? ? ? ? }

ul li:nth-child(4){

background-color:#ff7ad8;

? ? ? ? }

ul li:nth-child(5){

background-color:#efff24;

? ? ? ? }

? ? ? ? ul:hover li{ ? ? ? ? ? ? /*這個是當(dāng)鼠標(biāo)到ul 上的時候所有的列都縮小*/

width:100px;}

/*當(dāng)鼠標(biāo)到具體的列上的時候。這個列變大*/

? ? ? ? ul li:hover{

width:600px;}