多说360度旋转css代码

作者:matrix 被围观: 2,620 次 发布时间:2014-02-06 分类:Wordpress | 16 条评论 »

这是一个创建于 3704 天前的主题,其中的信息可能已经有所发展或是发生改变。

多次看到多说评论的头像样式,鼠标悬停的时候360度旋转~

css

#ds-avatar{  
    width:54px;height:54px; /*设置图像的长和宽*/  
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/  
    -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/  
    -moz-border-radius:27px;  
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;  
    -webkit-transition: 0.4s;     
    -webkit-transition: -webkit-transform 0.4s ease-out;  
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/  
        -moz-transition: -moz-transform 0.4s ease-out;  
        }  

#ds-avatar:hover{/*设置鼠标悬浮在头像时的css样式*/  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
    transform: rotateZ(360deg);/*图像旋转360度*/  
    -webkit-transform: rotateZ(360deg);  
        -moz-transform: rotateZ(360deg);  
    }  

说明:#ds-avatar为头像图片的样式ID。

来自:http://ifoouucode.duapp.com/37

其他文章:
本文固定链接:https://www.hhtjim.com/say-360-degree-rotating-code.html
matrix
本文章由 matrix 于2014年02月06日发布在Wordpress分类下,目前没有通告,你可以至底部留下评论。
转载请注明:多说360度旋转css代码-HHTjim'S 部落格
关键字:, ,

有16 条评论 »

  1. 小菜 小菜 2014-3-3 18:23:31 +0800#10

    很多人都用了这个,很好看

  2. Youth.霖 Youth.霖 2014-2-13 23:37:02 +0800#9

    你说我该不该再启用多说呢。。。

    • Matrix Matrix Moderator 2014-2-14 0:13:40 +0800

      哈 评论放在自己的数据库安心点。 不过多说的确方便些。

  3. 垂直绿化 垂直绿化 2014-2-11 14:46:44 +0800#8

    还有其他变换的代码额。欢迎回访。

    • Matrix Matrix Moderator 2014-2-11 15:12:02 +0800

      没办法,你那地不能留言

  4. 圣华设计 圣华设计 2014-2-11 11:42:23 +0800#7

    😛 路过看看。

  5. 晨曦 晨曦 2014-2-11 10:08:27 +0800#6

    多说不好,

  6. 神父 神父 2014-2-10 8:33:57 +0800#5

    你引用的博客挂掉了啊

    • Matrix Matrix Moderator 2014-2-10 11:56:00 +0800

      403 bae老有问题

  7. 小清新头像吧 小清新头像吧 2014-2-8 17:55:47 +0800#4

    挺好的,不过有啥好用的呢?

    • Matrix Matrix Moderator 2014-2-8 19:11:41 +0800

      这玩意也就仅供观赏,没啥用

  8. 免费部落 免费部落 2014-2-8 16:41:08 +0800#3

    没有用过多说!

  9. 微历史 微历史 2014-2-8 9:56:49 +0800#2

    除了好看,没什么实际意义

  10. 博客甲 博客甲 2014-2-7 15:56:06 +0800#1

    上班了,新年快乐啊~~~

    • Matrix Matrix Moderator 2014-2-7 16:32:24 +0800

      嗯 谢谢。
      我倒没上班 就等着开学

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!