让多说评论实现圆角头像动画

现在好多网站都流行头像圆角、触发动画效果、阴影神马的。为了赶上潮流,我也采用以下吧!(* ̄▽ ̄)y。下面是转来的这个漂亮的留言评论样式是怎么制作的:

找到头像图像选择符

用高级浏览器(例如360、Chrome等),使用「审查元素」来定位元素位置

打开使用多说评论的网站(打开自己的博客就好了,找一篇有评论的)。

右键一个头像图像>审查元素。

随后,浏览器下方就能显示相应的元素信息:

<div class="ds-avatar">
	<a href="http://www.moeyue.com/" rel="nofollow" target="_blank">
		<img src="http://gravatar.duoshuo.com/avatar/e4c5d825bf104e1da60e51c2a6f6c2fa?s=50" data-user-id="566892" />
	</a>
</div>

此时,就找到了评论栏中头像的对应类选择符(为等会自定义css准备)。

这时,别忘了再看看这个id包含在什么DIV结构内,往上看,发现了文章页面的多说评论栏总结构被div定义为

<div id=”ds-reset”>,这下我们就能了解到,ds-avatar是包含在ID选择符:ds-reset之内的。

以上这个只是举例,衍生的其他元素均可以通过「审查元素」找到。

自定义CSS

如果你不是很熟练CSS,建议你首先去W3school简单地学习一下CSS的基本知识

http://www.w3school.com.cn/css/index.asp

自定义CSS的基本结构是

选择符{属性:属性值}

例:p{color:#eeffee}  >> 字体{颜色:颜色值}

现在我们可以确定如果我们要定义头像,应该用到

#ds-reset .ds-avatar img{这里面就根据你的需求填吧}

下面就介绍怎么使用CSS代码,让图像实现不同的效果

圆角(或者圆形)+阴影

在这里我直接使用的是CSS3代码

#ds-reset .ds-avatar img{
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;
}

鼠标悬浮时:图像进行360度旋转

#ds-reset .ds-avatar img{
	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-reset .ds-avatar img: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);
   	}

本文转自luolei博客

本文共 17 个回复

  1. xiao says:
    最近很多博客都少了评论,咋回事
  2. 独行猫儿 says:
    对多说无爱
  3. 阳光互联网博客 says:
    主题不错。无意间路过。博主是个萌妹纸呀?》 呵呵 难得!新年快乐哟!
  4. geekdai says:
    果然是萌控,写个代码还贴一张妹子的图片~

发表留言,喵!