多说360度旋转css代码

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

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

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

#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 于2014年02月06日发布在Wordpress分类下，目前没有通告，你可以至底部留下评论。
转载请注明：多说360度旋转css代码-HHTjim'S 部落格
关键字：css, 多说, 特效

有16 条评论 »

小菜 2014-03-03T18:23:31+08:00#10

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

回复
Youth.霖 2014-02-13T23:37:02+08:00#9

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

回复
- Matrix 2014-02-14T00:13:40+08:00
  
  哈评论放在自己的数据库安心点。不过多说的确方便些。
  
  回复
垂直绿化 2014-02-11T14:46:44+08:00#8

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

回复
- Matrix 2014-02-11T15:12:02+08:00
  
  没办法，你那地不能留言
  
  回复
圣华设计 2014-02-11T11:42:23+08:00#7

😛 路过看看。

回复
晨曦 2014-02-11T10:08:27+08:00#6

多说不好，

回复
神父 2014-02-10T08:33:57+08:00#5

你引用的博客挂掉了啊

回复
- Matrix 2014-02-10T11:56:00+08:00
  
  403 bae老有问题
  
  回复
小清新头像吧 2014-02-08T17:55:47+08:00#4

挺好的，不过有啥好用的呢？

回复
- Matrix 2014-02-08T19:11:41+08:00
  
  这玩意也就仅供观赏，没啥用
  
  回复
免费部落 2014-02-08T16:41:08+08:00#3

没有用过多说！

回复
微历史 2014-02-08T09:56:49+08:00#2

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

回复
- Matrix 2014-02-08T15:16:07+08:00
  
  说得对
  
  回复
博客甲 2014-02-07T15:56:06+08:00#1

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

回复
- Matrix 2014-02-07T16:32:24+08:00
  
  嗯谢谢。
  我倒没上班就等着开学
  
  回复