課程JS+css3實現(xiàn)帶預(yù)覽圖幻燈片效果 問題
有個問題請大家指導(dǎo)哈,就是那兩個標題沒有在:hover下怎么就動起來了 11分鐘左右
.slider .main .main-i h2{margin-left:45px;}
.slider .main .main-i h3{margin-left:-45px;}
.slider .main .main-i h2,.slider .main .main-i h3{ -webkit-transform:all 0.8s;}
.slider .main .main-i_active h2,.slider .main .main-i_active h2{margin-right:0;}
2016-08-22
這個是css3動畫呀,transition就是一個動畫屬性,你可以去w3school看看這個API(transition),所以它跟hover是沒有關(guān)系的,hover是鼠標覆蓋,而transition是頁面加載時就可以動了
transform:all 0.8s ? ? all指的就是.slider .main .main-i h2,.slider .main .main-i h3到.slider .main .main-i_active h2,.slider .main .main-i_active h2里的所有有變化的屬性 ,可以看到margin-right產(chǎn)生了變化,而0.8就是運動的時間了。
2016-08-22
因為有一個transform。main內(nèi)div的class名從main-i變成了main-i_active,h2和h3的margin隨之發(fā)生了變化,加了transform之后,margin會在0.8s內(nèi)過渡改變,所以有了一個動態(tài)的效果。