Ryan

让评论者的头像动起来:无压力小白级教程
用多说的都喜欢给评论者头像加个动画效果,博主也跟风一下,给Minty主题的评论者头像加个动画效果。Minty主题可...
扫描右侧二维码阅读全文
08
2014/03

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

用多说的都喜欢给评论者头像加个动画效果,博主也跟风一下,给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);    
搬瓦工年付$187机房套餐补货了,电信联通优化,512M内存/500G流量/1G带宽,建站稳定,优惠码:BWH1ZBPVK,【点击购买】!
搬瓦工年付$28CN2高速线路,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快,建站稳定,优惠码同上,【点击购买】!
Last modification:March 16th, 2016 at 05:11 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

22 comments

  1. 阿桑小僧

    呵呵 慕名而来啊 :oops:

  2. 小菜

    支持个,博主本来就是歪脖子了,现在都歪到地上了

  3. arno

    前端技术豆腐越来越牛了~~~

    1. Ryan
      @arno

      :arrow: 都是拿过来的代码

      1. arno
        @Ryan

        !!!求邮件样式~这玩意太q~~~

  4. Pang

    这安逸 :-P

  5. ytf4425

    一开始还以为是多说咧

    1. Ryan
      @ytf4425

      额,差不多的,改一下class名而已

  6. xiao

    代码高亮不错,啥插件

    1. Ryan
      @xiao

      不是插件

      1. xiao
        @Ryan

        跪求代码

        1. Ryan
          @xiao

          使用有点麻烦http://doufu.ru/no-plugins-code-highlight.html

  7. 欧美音乐吧

    学习学习!!!

  8. 吃豆腐不吐葡萄皮

    推荐个能整X站的空间吧 :twisted:

    1. Ryan
      @吃豆腐不吐葡萄皮

      by,yh,有钱就用linode

  9. 小二苘

    :) 学习了

  10. stephen

    豆腐的头飞掉了 吼吼 8)

    1. Ryan
      @stephen

      :?: 图例不是我

      1. stephen
        @Ryan

        :arrow: :arrow: 好讨厌 :arrow: :arrow:

  11. Jimmy

    喜上镜 :twisted:

    1. Ryan
      @Jimmy

      就是让你上镜撒

  12. 陌羽

    我来试试,转起来! :idea: