Saber 酱的抱枕

Fly me to the moon

10/4
2014
学习

css3的旋转动画一例

saber 撰写 7条回复 2,467次查看

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

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

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

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

相关文章：

使用css3动画给评论头像增加旋转效果
使用 ::before 和 ::after 伪元素来制作CSS3动画
css3制作的列表扩散效果一例
css3新增的background相关属性
使用CSS3的user-select属性禁止选择元素
使用css3动画制作网页底部走动的桌宠
使用CSS美化表单（checkbox、radio）

css3的旋转动画一例

  2. K
    UnknownUnknownUnknownUnknown

    是不是你回复我都会收到邮件的，这个回复我没收到邮件呢，喵了个咪¬_¬另外，旋转大概会设置了，感谢saber酱。ฅ*ω*ฅ

    回复