多说360度旋转css代码

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

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

多次看到多说评论的头像样式，鼠标悬停的时候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-3-3 18:23:31 +0800#10

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

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

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

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

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

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

😛 路过看看。

回复
晨曦 2014-2-11 10:08:27 +0800#6

多说不好，

回复
神父 2014-2-10 8:33:57 +0800#5

你引用的博客挂掉了啊

回复
- Matrix 2014-2-10 11:56:00 +0800
  
  403 bae老有问题
  
  回复
小清新头像吧 2014-2-8 17:55:47 +0800#4

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

回复
- Matrix 2014-2-8 19:11:41 +0800
  
  这玩意也就仅供观赏，没啥用
  
  回复
免费部落 2014-2-8 16:41:08 +0800#3

没有用过多说！

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

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

回复
- Matrix 2014-2-8 15:16:07 +0800
  
  说得对
  
  回复
博客甲 2014-2-7 15:56:06 +0800#1

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

回复
- Matrix 2014-2-7 16:32:24 +0800
  
  嗯谢谢。
  我倒没上班就等着开学
  
  回复