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的名称。

样式一:

.comment-author img:hover{     
    -webkit-animation-fill-mode:both;     
    -moz-animation-fill-mode:both;     
    -ms-animation-fill-mode:both;     
    -o-animation-fill-mode:both;     
    animation-fill-mode:both;     
    -webkit-animation-duration: 0s;     
    -moz-animation-duration: 0s;     
    -ms-animation-duration: 0s;     
    -o-animation-duration: 0s;     
    animation-duration: 0s;     
    -webkit-animation-duration: 0.7s;     
    -moz-animation-duration: 0.7s;     
    -ms-animation-duration: 0.7s;     
    -o-animation-duration: 0.7s;     
    animation-duration: 0.7s;     
}     
    
@-webkit-keyframes rollIn {     
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }     
}     
    
@-moz-keyframes rollIn {     
    0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }     
}     
    
@-o-keyframes rollIn {     
    0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); }     
}     
    
@keyframes rollIn {     
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }     
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }     
}     
    
.comment-author img{     
    -webkit-animation-name: rollIn;     
    -moz-animation-name: rollIn;     
    -o-animation-name: rollIn;     
    animation-name: rollIn;     
}     
    
    
@-webkit-keyframes rollOut {     
    0% {     
        opacity: 1;     
        -webkit-transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        -webkit-transform: translateX(100%) rotate(120deg);     
    }     
}     
    
@-moz-keyframes rollOut {     
    0% {     
        opacity: 1;     
        -moz-transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        -moz-transform: translateX(100%) rotate(120deg);     
    }     
}     
    
@-o-keyframes rollOut {     
    0% {     
        opacity: 1;     
        -o-transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        -o-transform: translateX(100%) rotate(120deg);     
    }     
}     
    
@keyframes rollOut {     
    0% {     
        opacity: 1;     
        transform: translateX(0px) rotate(0deg);     
    }     
    
    100% {     
        opacity: 0;     
        transform: translateX(100%) rotate(120deg);     
    }     
}     
    
.comment-author img:hover{     
    -webkit-animation-name: rollOut;     
    -moz-animation-name: rollOut;     
    -o-animation-name: rollOut;     
    animation-name: rollOut;     
} 

样式二:

.comment-author img{     
   width:54px;height:54px;/*设置图像的长和宽,这里要根据自己的评论框情况更改*/    
   border-radius:27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/    
    -webkit-border-radius:27px;/*圆角效果:兼容webkit浏览器*/    
    -moz-border-radius:27px;     
    box-shadow:inset0 -1px0#3333sf;/*设置图像阴影效果*/    
    -webkit-box-shadow:inset0 -1px0#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;     
}      
.comment-author img:hover{/*设置鼠标悬浮在头像时的CSS样式*/    
    box-shadow: 0 010px #fff; rgba(255,255,255,.6),inset0 020pxrgba(255,255,255,1);     
    -webkit-box-shadow: 0 010px #fff; rgba(255,255,255,.6),inset0 020pxrgba(255,255,255,1);     
    transform: rotateZ(360deg);/*图像旋转360度*/    
    -webkit-transform: rotateZ(360deg);     
    -moz-transform: rotateZ(360deg);    
}
搬瓦工年付$187机房套餐补货了,电信联通优化,512M内存/500G流量/1G带宽,建站稳定,优惠码:BWH1ZBPVK,【点击购买】!
搬瓦工年付$28CN2高速线路,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快,建站稳定,优惠码同上,【点击购买】!
Last modification:July 22nd, 2018 at 11:51 am
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: