多说360度旋转css代码

作者:Matrix 被围观: 718 次 发布时间:2014-02-06 分类:wordpress建站 拷贝型 | 16 条评论 »

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

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

css代码:

  1. #ds-avatar{  
  2.     width:54px;height:54px/*设置图像的长和宽*/  
  3.     border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/  
  4.     -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/  
  5.     -moz-border-radius:27px;  
  6.     box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
  7.     -webkit-box-shadow: inset 0 -1px 0 #3333sf;  
  8.     -webkit-transition: 0.4s;     
  9.     -webkit-transition: -webkit-transform 0.4s ease-out;  
  10.     transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/  
  11.         -moz-transition: -moz-transform 0.4s ease-out;  
  12.         }  
  13.    
  14. #ds-avatar:hover{/*设置鼠标悬浮在头像时的CSS样式*/  
  15.     box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
  16.     -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);  
  17.     transform: rotateZ(360deg);/*图像旋转360度*/  
  18.     -webkit-transform: rotateZ(360deg);  
  19.         -moz-transform: rotateZ(360deg);  
  20.     }  

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

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

本文固定链接:http://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

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

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

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