让评论者的头像动起来:无压力小白级教程

用多说的都喜欢给评论者头像加个动画效果,博主也跟风一下,给Minty主题的评论者头像加个动画效果。

Minty主题可定制不错,让我们可以通过自定义CSS,给我们的评论栏带来更多的想象力:圆角头像、触发动画效果、阴影神马的当然不在话下。

一、你需要

1、一颗愿意折腾的心

2、拥有一个Wordpress博客(想必看到这篇博文的人,90%都符合这个条件了吧)

3、懂基础CSS代码+会调试(想必看到这篇博文的人,50%也都符合这个条件了吧)

二、评论头像添加动画教程

1、在哪里可以添加相关代码?

对于Minty主题

comments_author_img_moz_01

对于其他主题

comments_author_img_moz_02

只要是class命名规范的主题都可以用下面的代码,若发现无效请修改相关class的名称。

样式一:

  1. .comment-author img:hover{     
  2.     -webkit-animation-fill-mode:both;     
  3.     -moz-animation-fill-mode:both;     
  4.     -ms-animation-fill-mode:both;     
  5.     -o-animation-fill-mode:both;     
  6.     animation-fill-mode:both;     
  7.     -webkit-animation-duration: 0s;     
  8.     -moz-animation-duration: 0s;     
  9.     -ms-animation-duration: 0s;     
  10.     -o-animation-duration: 0s;     
  11.     animation-duration: 0s;     
  12.     -webkit-animation-duration: 0.7s;     
  13.     -moz-animation-duration: 0.7s;     
  14.     -ms-animation-duration: 0.7s;     
  15.     -o-animation-duration: 0.7s;     
  16.     animation-duration: 0.7s;     
  17. }     
  18.     
  19. @-webkit-keyframes rollIn {     
  20.     0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }     
  21.     100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }     
  22. }     
  23.     
  24. @-moz-keyframes rollIn {     
  25.     0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }     
  26.     100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }     
  27. }     
  28.     
  29. @-o-keyframes rollIn {     
  30.     0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }     
  31.     100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }     
  32. }     
  33.     
  34. @keyframes rollIn {     
  35.     0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }     
  36.     100% { opacity: 1; transform: translateX(0px) rotate(0deg); }     
  37. }     
  38.     
  39. .comment-author img{     
  40.     -webkit-animation-name: rollIn;     
  41.     -moz-animation-name: rollIn;     
  42.     -o-animation-name: rollIn;     
  43.     animation-name: rollIn;     
  44. }     
  45.     
  46.     
  47. @-webkit-keyframes rollOut {     
  48.     0% {     
  49.         opacity: 1;     
  50.         -webkit-transform: translateX(0px) rotate(0deg);     
  51.     }     
  52.     
  53.     100% {     
  54.         opacity: 0;     
  55.         -webkit-transform: translateX(100%) rotate(120deg);     
  56.     }     
  57. }     
  58.     
  59. @-moz-keyframes rollOut {     
  60.     0% {     
  61.         opacity: 1;     
  62.         -moz-transform: translateX(0px) rotate(0deg);     
  63.     }     
  64.     
  65.     100% {     
  66.         opacity: 0;     
  67.         -moz-transform: translateX(100%) rotate(120deg);     
  68.     }     
  69. }     
  70.     
  71. @-o-keyframes rollOut {     
  72.     0% {     
  73.         opacity: 1;     
  74.         -o-transform: translateX(0px) rotate(0deg);     
  75.     }     
  76.     
  77.     100% {     
  78.         opacity: 0;     
  79.         -o-transform: translateX(100%) rotate(120deg);     
  80.     }     
  81. }     
  82.     
  83. @keyframes rollOut {     
  84.     0% {     
  85.         opacity: 1;     
  86.         transform: translateX(0px) rotate(0deg);     
  87.     }     
  88.     
  89.     100% {     
  90.         opacity: 0;     
  91.         transform: translateX(100%) rotate(120deg);     
  92.     }     
  93. }     
  94.     
  95. .comment-author img:hover{     
  96.     -webkit-animation-name: rollOut;     
  97.     -moz-animation-name: rollOut;     
  98.     -o-animation-name: rollOut;     
  99.     animation-name: rollOut;     

样式二:

  1. .comment-author img{     
  2.    width:54px;height:54px;/*设置图像的长和宽,这里要根据自己的评论框情况更改*/    
  3.    border-radius:27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/    
  4.     -webkit-border-radius:27px;/*圆角效果:兼容webkit浏览器*/    
  5.     -moz-border-radius:27px;     
  6.     box-shadow:inset0 -1px0#3333sf;/*设置图像阴影效果*/    
  7.     -webkit-box-shadow:inset0 -1px0#3333sf;     
  8.     -webkit-transition: 0.4s;        
  9.     -webkit-transition: -webkit-transform 0.4s ease-out;     
  10.     transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/    
  11.     -moz-transition: -moz-transform 0.4s ease-out;     
  12. }      
  13. .comment-author img:hover{/*设置鼠标悬浮在头像时的CSS样式*/    
  14.     box-shadow: 0 010px #fff; rgba(255,255,255,.6),inset0 020pxrgba(255,255,255,1);     
  15.     -webkit-box-shadow: 0 010px #fff; rgba(255,255,255,.6),inset0 020pxrgba(255,255,255,1);     
  16.     transform: rotateZ(360deg);/*图像旋转360度*/    
  17.     -webkit-transform: rotateZ(360deg);     
  18.     -moz-transform: rotateZ(360deg);    
分享到:

22 条评论

昵称
  1. 阿桑小僧
    呵呵 慕名而来啊
  2. 小菜
    支持个,博主本来就是歪脖子了,现在都歪到地上了
  3. arno
    前端技术豆腐越来越牛了~~~
    1. Ryan
      都是拿过来的代码
      1. arno
        !!!求邮件样式~这玩意太q~~~
  4. Pang
    这安逸
  5. ytf4425
    一开始还以为是多说咧
    1. Ryan
      额,差不多的,改一下class名而已
  6. xiao
    代码高亮不错,啥插件
    1. Ryan
      不是插件
      1. xiao
        跪求代码
        1. Ryan
          使用有点麻烦http://doufu.ru/no-plugins-code-highlight.html
  7. 欧美音乐吧
    学习学习!!!
  8. 吃豆腐不吐葡萄皮
    推荐个能整X站的空间吧
    1. Ryan
      by,yh,有钱就用linode
  9. 小二苘
    学习了
  10. stephen
    豆腐的头飞掉了 吼吼
    1. Ryan
      图例不是我
      1. stephen
        好讨厌
  11. Jimmy
    喜上镜
    1. Ryan
      就是让你上镜撒
  12. 陌羽
    我来试试,转起来!