多说360度旋转css代码
作者:matrix 被围观: 2,983 次 发布时间:2014-02-06 分类:Wordpress | 16 条评论 »
这是一个创建于 3901 天前的主题,其中的信息可能已经有所发展或是发生改变。
多次看到多说评论的头像样式,鼠标悬停的时候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
很多人都用了这个,很好看
你说我该不该再启用多说呢。。。
哈 评论放在自己的数据库安心点。 不过多说的确方便些。
还有其他变换的代码额。欢迎回访。
没办法,你那地不能留言
😛 路过看看。
多说不好,
你引用的博客挂掉了啊
403 bae老有问题
挺好的,不过有啥好用的呢?
这玩意也就仅供观赏,没啥用
没有用过多说!
除了好看,没什么实际意义
说得对
上班了,新年快乐啊~~~
嗯 谢谢。
我倒没上班 就等着开学