多说自定义CSS 让你的多说评论动感起来

话不多说,正文开始。

代码在下面(请用非IE浏览器看),将代码粘贴到多说评论-个性化设置-自定义CSS 里,刷新即可看到效果。

ps:代码都是共通的,不局限于多说,应用在别的效果上也是可以的。
预览效果请下拉至底部,鼠标移至留言头像上即可~

#ds-reset .ds-avatar img,#ds-reset .ds-avatar 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 rotateIn {      
    0% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(0);      
        opacity: 1;      
    }      
}      
@-moz-keyframes rotateIn {      
    0% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(0);      
        opacity: 1;      
    }      
}      
@-o-keyframes rotateIn {      
    0% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(0);      
        opacity: 1;      
    }      
}      
@keyframes rotateIn {      
    0% {      
        transform-origin: center center;      
        transform: rotate(-150deg);      
        opacity: 0;      
    }      
          
    100% {      
        transform-origin: center center;      
        transform: rotate(0);      
        opacity: 1;      
    }      
}      
     
#ds-reset .ds-avatar img{      
    -webkit-animation-name: rotateIn;      
    -moz-animation-name: rotateIn;      
    -o-animation-name: rotateIn;      
    animation-name: rotateIn;      
}      
@-webkit-keyframes rotateOut {      
    0% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        -webkit-transform-origin: center center;      
        -webkit-transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
@-moz-keyframes rotateOut {      
    0% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        -moz-transform-origin: center center;      
        -moz-transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
@-o-keyframes rotateOut {      
    0% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        -o-transform-origin: center center;      
        -o-transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
@keyframes rotateOut {      
    0% {      
        transform-origin: center center;      
        transform: rotate(0);      
        opacity: 1;      
    }      
          
    100% {      
        transform-origin: center center;      
        transform: rotate(150deg);      
        opacity: 0;      
    }      
}      
     
#ds-reset .ds-avatar img:hover{      
    -webkit-animation-name: rotateOut;      
    -moz-animation-name: rotateOut;      
    -o-animation-name: rotateOut;      
    animation-name: rotateOut;      
}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  0   博主  3

  1. avatar 时空镜像

    CSS演示式样

  2. avatar 时空镜像

    CSS演示式样

  3. avatar 时空镜像

    CSS演示式样