10/14
2016
刚才我给评论区头像添加了鼠标经过旋转的效果,是使用css3动画做的。
在css样式表里先定义一个旋转的动画,然后在鼠标经过头像时触发动画:
@keyframes rotate_once{ from {transform: rotate(0deg);} to {transform: rotate(360deg);} } .comment-meta .avatar:hover{ animation: rotate_once .5s; }
有时候必须结合JavaScript事件播放动画的时候,可以先把animation那句放到一个单独的class名里,然后通过JavaScript来动态添加、删除改动画的className,来达到播放动画或去除动画的效果。
示例:
element.addEventListener("mouseover",function(){ element.className=nowClassName+" rotate_once"; element.addEventListener("animationend",function(){ element.className=nowClassName; }) });
鼠标经过元素时添加rotate_once这个className,播放动画。动画播放完毕之后再去掉这个className。
这里有个知识点,就是JavaScript里有三个能监听动画播放的事件:
animationStart 动画开始执行 animationEnd 动画执行结束 animationIteration 重复动画开始执行(只有重复动画才会触发)
使用css3动画给评论头像增加旋转效果
08/17
2014
以前,大多数网站的用户头像都是矩形(多数是正方形)的,近些年来也有不少网站改用了圆角。贴吧的头像一直是矩形,但是我从去年就使用了自定义样式,我所看到的一直是圆形。刚才取消了样式,看到矩形的感觉挺不习惯,对比一下
我的感觉是,一方面圆形更圆润更优美,另一方面,就是圆形把四个边角都隐藏掉了,这在大多数情况下是很合适的。像我的头像,中间是人脸,四角是不重要的头发、背景,隐藏了正好能让人把注意力都集中到焦点,不会被那些杂乱的地方分神,挺好的。
头像:矩形与圆角的感受
07/14
2014
WordPress的头像是需要一个gravatar账户来设置的(以邮箱来注册),然后在与gravatar关联的地方(例如所有WordPress网站里),登陆你的帐号(其实就是邮箱),头像就会显示出来,一个头像网络通用,似乎也不错呢。
我的用户名是saberxuejian
注册之后去毛站试了试,果然有头像了←_←
详细教程请参考:
http://blog.sina.com.cn/s/blog_4fed2d3b01018h18.html