Saber 酱的抱枕

Fly me to the moon

10/4
2014
学习

css3的旋转动画一例

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

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

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

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

css3的旋转动画一例

    1. saber酱 文章作者
      UnknownUnknownUnknownUnknown

      恩,我也这么改了改 <img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_org.gif" />

      回复
  1. K
    UnknownUnknownUnknownUnknown

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

    回复
    1. 雪见仙尊 文章作者
      UnknownUnknownUnknownUnknown

      么么哒~现在用了多说,你登陆了多说账号来评论或者以游客身份评论时填写了邮箱就会收到提醒~之前是不行,回复邮件的那个插件不工作了

      回复
  2. k
    Google Chrome 39Google Chrome 39Windows 7Windows 7

    前辈,请问要是想鼠标向下指到目标元素时顺时针旋转,向上指到目标元素时逆时针旋转
    又该怎么设置

    回复
  3. k
    Google Chrome 39Google Chrome 39Windows 7Windows 7

    前辈,这篇文章加个wordpress标签吧,以后查看教程时好找,谢谢

    回复
    1. saber 文章作者
      Google Chrome 39Google Chrome 39Windows 7 x64 EditionWindows 7 x64 Edition

      我是弱渣啊,别叫我前辈,叫我saber酱就行~O(∩_∩)O~你要是对这篇文章有印象的话查看css这个标签应该会更容易找一些==和鼠标方向相关的应该使用js了吧,我不会呢Orz

      回复

评论 saber酱 撤销评论