kn007的个人博客
♥ You are here: Home > > > 答应乐猪的Deve theme评论实现圆角头像动画

答应乐猪的Deve theme评论实现圆角头像动画

by | 38 Comments

在乐猪博客的《多说评论也玩圆角头像动画》中答应乐猪有空帮他搞搞css实现评论圆角头像动画:

事情交代清楚了,剩下的就是结果了,只要在deve theme的style.css加入如下代码:

#commentajax .gravatar img{
width:40px;height:40px; /*设置图像的长和宽*/
border-radius: 20px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
-webkit-border-radius: 20px;/*圆角效果:兼容webkit浏览器*/
-moz-border-radius:20px;
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;
}
#commentajax .gravatar 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);
}

 注:应该可以通用于 良心 的大多数主题。

效果图:

转载请注明转自:kn007的个人博客的《答应乐猪的Deve theme评论实现圆角头像动画

donate
有所帮助?

Comments

38 Comments立即评论
Loading...
  1. MOD回复

    不是我的博客哦。

    1. @kn007: 我的博客啊,代码加进去了,没有反映啊?现在代码还在里面呢

    2. MOD回复

      @从良未遂: 是没效果,请自行检查下。。。你那里没有commentajax这个id。你可以改一个class。。。奇怪你怎么会没有ajax。。。

    3. @kn007: 我也不晓得啊,能指导一下怎么改吗?实在不好意思,俺是代码盲啊

    4. MOD回复

      @从良未遂: #commentajax改成 .commentslist试试,要不就去掉试试

    5. @kn007: 非常感谢,成功了。不过是改成 .commentlist

    6. MOD回复

      @从良未遂: 嗯,好。 :oops:

  2. 回复

    :cool: 十分感谢博主的代码,以及 从良未遂 的修改,十分感谢~~

    1. MOD回复

      @sincerefly: :lol: 不客气

  3. 回复

    :roll: :roll: :roll: kn077大大,我也想弄一个,mark一下

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif