現(xiàn)在用css3來做特效的已經(jīng)越來越多，在我們的愛家海外月子中心的項(xiàng)目中，用到了很多特效。其中有一項(xiàng)就是實(shí)現(xiàn)圖片360°的旋轉(zhuǎn)效果。
.haiwai .change img{ transition:All 0.4s ease-in-out; -webkit-transition:All 0.8s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.8s ease-in-out;}
.haiwai .change img:hover{transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg);}首先要定義圖片，這里all的意思是如果想?yún)^(qū)分多個(gè)動(dòng)畫讓他們分開執(zhí)行就把屬性分開來寫，不用區(qū)分就用all，ease-in-out(先慢到快再到慢)，之后鼠標(biāo)經(jīng)過的時(shí)候旋轉(zhuǎn)360°。
這樣一個(gè)簡(jiǎn)單的動(dòng)畫就實(shí)現(xiàn)了。是不是很簡(jiǎn)單，明白的小伙伴趕緊動(dòng)手試試吧！
上一篇： 背景圖如何過渡加載
下一篇： rgba()用法如何兼容ie8？
