saber酱的抱枕

Fly me to the moon

10/4
08:56
学习

css3的旋转动画一例

今天在看某网站的时候发现鼠标经过用户头像,会产生360°旋转的效果,我意识到这应该是个css3的动画效果。可是css3我也没怎么实践过,于是审查元素,最后发现了代码。

对某一元素或者选择器设置:

a:hover{
transition:all .5s;/*所有动画效果过渡时间为0.5秒*/
-webkit-transform:rotate(360deg);/*旋转360度*/
}

刚开始我确实对所有的a标签这样设置了,结果极其丧病,后来去掉了正文部分的旋转效果。

css3的旋转动画一例