现在用css3来做特效的已经越来越多,在我们的爱家海外月子中心的项目中,用到了很多特效。其中有一项就是实现图片360°的旋转效果。
.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的意思是如果想区分多个动画让他们分开执行就把属性分开来写,不用区分就用all,ease-in-out(先慢到快再到慢),之后鼠标经过的时候旋转360°。
这样一个简单的动画就实现了。是不是很简单,明白的小伙伴赶紧动手试试吧!
上一篇: 背景图如何过渡加载
下一篇: rgba()用法如何兼容ie8?
关键词: