多说评论CSS样式, 在其他博客看到的Copy回来

发布时间：January 19, 2013
2271 views
5 comments
20580 words
Categories：折腾

duoshuo

昨天@Cysime在他的博客分享了一个多说的自定义CSS效果，实现圆角头像，鼠标移上时旋转的效果，就是下面的效果八。因为看了那个玩意儿觉得很有意思，所以才萌生了写这篇技术文的想法。我想很多多说的用户都会需要的。我今天写到的CSS3效果是之前在网上找到收藏的代码素材，现在应用到多说上。

正文开始

各种效果我都做成了GIF动态图，光光截这些图都花了我好长的时间。大家可以很直观的看到效果。毕竟是图片，实际效果当然会更好的多。

将代码粘贴到多说评论-个性化设置-自定义CSS 里，刷新即可看到效果。

下面是预览图片，看到好看的样式，点击图片试试！

（图片顺序从左到右，由上到下分别是样式一至样式九。）

文章内容比较长，都是一些代码来的，请点击自己喜欢的样式快速浏览。

ps: 代码都是共通的，不局限于多说，应用在别的效果上也是可以的。

next ps: 汗差一个就凑够十个了。

样式一

ds_css1

#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: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@-moz-keyframes rotateInDownLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }
}

@-o-keyframes rotateInDownLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
#ds-reset .ds-avatar img{
    -webkit-animation-name: rotateInDownLeft;
    -moz-animation-name: rotateInDownLeft;
    -o-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}
#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: rotateOutDownLeft;
    -moz-animation-name: rotateOutDownLeft;
    -o-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@-moz-keyframes rotateOutDownLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(90deg);
        opacity: 0;
    }
}
@-o-keyframes rotateOutDownLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}

样式二

ds_css2

#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 bounceIn {
	0% {
	opacity:0;
	-webkit-transform:scale(.3);
}
50% {
	opacity:1;
	-webkit-transform:scale(1.05);
}
70% {
	-webkit-transform:scale(.9);
}
100% {
	-webkit-transform:scale(1);
}
}
@-moz-keyframes bounceIn {
	0% {
	opacity:0;
	-moz-transform:scale(.3);
}
50% {
	opacity:1;
	-moz-transform:scale(1.05);
}
70% {
	-moz-transform:scale(.9);
}
100% {
	-moz-transform:scale(1);
}
}
@-o-keyframes bounceIn {
	0% {
	opacity:0;
	-o-transform:scale(.3);
}
50% {
	opacity:1;
	-o-transform:scale(1.05);
}
70% {
	-o-transform:scale(.9);
}
100% {
	-o-transform:scale(1);
}
}
@keyframes bounceIn {
	0% {
	opacity:0;
	transform:scale(.3);
}
50% {
	opacity:1;
	transform:scale(1.05);
}
70% {
	transform:scale(.9);
}
100% {
	transform:scale(1);
}
}
#ds-reset .ds-avatar img {
	-webkit-animation-name:bounceIn;
	-moz-animation-name:bounceIn;
	-o-animation-name:bounceIn;
	animation-name:bounceIn;
}
@-webkit-keyframes bounceOut {
	0% {
	-webkit-transform:scale(1);
}
25% {
	-webkit-transform:scale(.95);
}
50% {
	opacity:1;
	-webkit-transform:scale(1.1);
}
100% {
	opacity:0;
	-webkit-transform:scale(.3);
}
}
@-moz-keyframes bounceOut {
	0% {
	-moz-transform:scale(1);
}
25% {
	-moz-transform:scale(.95);
}
50% {
	opacity:1;
	-moz-transform:scale(1.1);
}
100% {
	opacity:0;
	-moz-transform:scale(.3);
}
}
@-o-keyframes bounceOut {
	0% {
	-o-transform:scale(1);
}
25% {
	-o-transform:scale(.95);
}
50% {
	opacity:1;
	-o-transform:scale(1.1);
}
100% {
	opacity:0;
	-o-transform:scale(.3);
}
}
@keyframes bounceOut {
	0% {
	transform:scale(1);
}
25% {
	transform:scale(.95);
}
50% {
	opacity:1;
	transform:scale(1.1);
}
100% {
	opacity:0;
	transform:scale(.3);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-animation-name:bounceOut;
	-moz-animation-name:bounceOut;
	-o-animation-name:bounceOut;
	animation-name:bounceOut;
}

样式三

ds_css3

#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;
}

样式四

ds_css4

#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 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); }
}

#ds-reset .ds-avatar 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);
}
}

#ds-reset .ds-avatar img:hover{
-webkit-animation-name: rollOut;
-moz-animation-name: rollOut;
-o-animation-name: rollOut;
animation-name: rollOut;
}

样式五

ds_css5

#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 swing {
	20%,40%,60%,80%,100% {
	-webkit-transform-origin:top center;
}
20% {
	-webkit-transform:rotate(15deg);
}
40% {
	-webkit-transform:rotate(-10deg);
}
60% {
	-webkit-transform:rotate(5deg);
}
80% {
	-webkit-transform:rotate(-5deg);
}
100% {
	-webkit-transform:rotate(0deg);
}
}
@-moz-keyframes swing {
	20% {
	-moz-transform:rotate(15deg);
}
40% {
	-moz-transform:rotate(-10deg);
}
60% {
	-moz-transform:rotate(5deg);
}
80% {
	-moz-transform:rotate(-5deg);
}
100% {
	-moz-transform:rotate(0deg);
}
}
@-o-keyframes swing {
	20% {
	-o-transform:rotate(15deg);
}
40% {
	-o-transform:rotate(-10deg);
}
60% {
	-o-transform:rotate(5deg);
}
80% {
	-o-transform:rotate(-5deg);
}
100% {
	-o-transform:rotate(0deg);
}
}
@keyframes swing {
	20% {
	transform:rotate(15deg);
}
40% {
	transform:rotate(-10deg);
}
60% {
	transform:rotate(5deg);
}
80% {
	transform:rotate(-5deg);
}
100% {
	transform:rotate(0deg);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-transform-origin:top center;
	-moz-transform-origin:top center;
	-o-transform-origin:top center;
	transform-origin:top center;
	-webkit-animation-name:swing;
	-moz-animation-name:swing;
	-o-animation-name:swing;
	animation-name:swing;
}

样式六

ds_css6

#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 pulse {
	0% {
	-webkit-transform:scale(1);
}
50% {
	-webkit-transform:scale(1.1);
}
100% {
	-webkit-transform:scale(1);
}
}
@-moz-keyframes pulse {
	0% {
	-moz-transform:scale(1);
}
50% {
	-moz-transform:scale(1.1);
}
100% {
	-moz-transform:scale(1);
}
}
@-o-keyframes pulse {
	0% {
	-o-transform:scale(1);
}
50% {
	-o-transform:scale(1.1);
}
100% {
	-o-transform:scale(1);
}
}
@keyframes pulse {
	0% {
	transform:scale(1);
}
50% {
	transform:scale(1.1);
}
100% {
	transform:scale(1);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-animation-name:pulse;
	-moz-animation-name:pulse;
	-o-animation-name:pulse;
	animation-name:pulse;
}

样式七

ds_css7

#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 wobble {
	0% {
	-webkit-transform:translateX(0%);
}
15% {
	-webkit-transform:translateX(-25%) rotate(-5deg);
}
30% {
	-webkit-transform:translateX(20%) rotate(3deg);
}
45% {
	-webkit-transform:translateX(-15%) rotate(-3deg);
}
60% {
	-webkit-transform:translateX(10%) rotate(2deg);
}
75% {
	-webkit-transform:translateX(-5%) rotate(-1deg);
}
100% {
	-webkit-transform:translateX(0%);
}
}
@-moz-keyframes wobble {
	0% {
	-moz-transform:translateX(0%);
}
15% {
	-moz-transform:translateX(-25%) rotate(-5deg);
}
30% {
	-moz-transform:translateX(20%) rotate(3deg);
}
45% {
	-moz-transform:translateX(-15%) rotate(-3deg);
}
60% {
	-moz-transform:translateX(10%) rotate(2deg);
}
75% {
	-moz-transform:translateX(-5%) rotate(-1deg);
}
100% {
	-moz-transform:translateX(0%);
}
}
@-o-keyframes wobble {
	0% {
	-o-transform:translateX(0%);
}
15% {
	-o-transform:translateX(-25%) rotate(-5deg);
}
30% {
	-o-transform:translateX(20%) rotate(3deg);
}
45% {
	-o-transform:translateX(-15%) rotate(-3deg);
}
60% {
	-o-transform:translateX(10%) rotate(2deg);
}
75% {
	-o-transform:translateX(-5%) rotate(-1deg);
}
100% {
	-o-transform:translateX(0%);
}
}
@keyframes wobble {
	0% {
	transform:translateX(0%);
}
15% {
	transform:translateX(-25%) rotate(-5deg);
}
30% {
	transform:translateX(20%) rotate(3deg);
}
45% {
	transform:translateX(-15%) rotate(-3deg);
}
60% {
	transform:translateX(10%) rotate(2deg);
}
75% {
	transform:translateX(-5%) rotate(-1deg);
}
100% {
	transform:translateX(0%);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-animation-name:wobble;
	-moz-animation-name:wobble;
	-o-animation-name:wobble;
	animation-name:wobble;
}

样式八

ds_css8

#ds-reset .ds-avatar img {
	width:54px;
	height:54px;
	/*设置图像的长和宽，这里要根据自己的评论框情况更改*/
border-radius:27px;
	/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius:27px;
	/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
	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;
}
#ds-reset .ds-avatar 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);
}

样式九

ds_css9

#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: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}
@-webkit-keyframes flip {
0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}
40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function: ease-out;}
50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;}
80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;}
100% {-webkit-transform: perspective(400px) scale(1);-webkit-animation-timing-function: ease-in;}
}

@-moz-keyframes flip {
0% {-moz-transform: perspective(400px) rotateY(0);-moz-animation-timing-function: ease-out;}
40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function: ease-out;}
50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}
80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}
100% {-moz-transform: perspective(400px) scale(1);-moz-animation-timing-function: ease-in;}
}
@-o-keyframes flip {
0% {-o-transform: perspective(400px) rotateY(0);-o-animation-timing-function: ease-out;}
40% {-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function: ease-out;}
50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function: ease-in;}
80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
100% {-o-transform: perspective(400px) scale(1);-o-animation-timing-function: ease-in;}
}
@keyframes flip {
0% {transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}
40% {transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}
50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
80% {transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
100% {transform: perspective(400px) scale(1);animation-timing-function: ease-in;}
}

JiaJieChan个人对第三方的评论木有需要，所以把这个样式应用到自用的inove主题上了，效果可以移动到各条评论看看。

移动到评论头像就会摇摆一下，就像树叶随风摇摆，太有爱了！ 7:)

本文转载自 http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html

Last modification：June 25, 2021

如果解决了你的困扰, 赏杯咖啡吧!
正文字体：苍耳字库（屏幕显示字体）·苍耳今楷

5 comments

阿飞博客
June 30, 2014

很不错的代码，学习了！

Reply
xperience
February 8, 2013

不错！先收藏了。

Reply
jaychen
January 29, 2013

@懒人梦醒就是不能删除评论? 31:)

Reply
懒人梦醒
January 29, 2013

多说现在有个不好的地方就是重复新建之后不能删除已有的.
我以前用的到现在还存在....

Reply
我的名字叫麒
January 22, 2013

博主的背景图片是在太簑了

Reply

多说评论CSS样式, 在其他博客看到的Copy回来

jaychen • 2013 年 01 月 19 日

<p style="text-align: center;"><img class="aligncenter size-full wp-image-2253" alt="duoshuo" src="https://jay.tg/usr/uploads/2013/01/duoshuo.jpg" width="570" height="130" /></p><p>昨天@<a href="http://www.icyif.com/" target="_blank" rel="nofollow">Cysime</a>在他的博客分享了一个多说的自定义CSS效果，实现圆角头像，鼠标移上时旋转的效果，就是下面的效果八。因为看了那个玩意儿觉得很有意思，所以才萌生了写这篇技术文的想法。我想很多多说的用户都会需要的。我今天写到的CSS3效果是之前在网上找到收藏的代码素材，现在应用到多说上。</p><p>&nbsp;</p><h4>正文开始</h4><p>各种效果我都做成了GIF动态图，光光截这些图都花了我好长的时间。大家可以很直观的看到效果。毕竟是图片，实际效果当然会更好的多。</p><p>将代码粘贴到多说评论-个性化设置-自定义CSS 里，刷新即可看到效果。</p><h5><strong>下面是预览图片，看到好看的样式，点击图片试试！</strong></h5><p><span style="color: #333333;">（图片顺序从左到右，由上到下分别是样式一至样式九。）</span></p><p>文章内容比较长，都是一些代码来的，请点击自己喜欢的样式快速浏览。</p><p><a href="#st_1"><img class="alignnone size-full wp-image-2254" title="样式一" alt="样式一" src="https://jay.tg/usr/uploads/2013/01/ds_css1.gif" width="260" height="107" /></a> <a href="#st_2"><img class="alignnone size-full wp-image-2255" title="样式二" alt="样式二" src="https://jay.tg/usr/uploads/2013/01/ds_css2.gif" width="260" height="107" /></a> <a href="#st_3"><img class="alignnone size-full wp-image-2256" title="样式三" alt="样式三" src="https://jay.tg/usr/uploads/2013/01/ds_css3.gif" width="260" height="107" /></a> <a href="#st_4"><img class="alignnone size-full wp-image-2257" title="样式四" alt="样式四" src="https://jay.tg/usr/uploads/2013/01/ds_css4.gif" width="260" height="107" /></a> <a href="#st_5"><img class="alignnone size-full wp-image-2258" title="样式五" alt="样式五" src="https://jay.tg/usr/uploads/2013/01/ds_css5.gif" width="260" height="107" /></a> <a href="#st_6"><img class="alignnone size-full wp-image-2259" title="样式六" alt="样式六" src="https://jay.tg/usr/uploads/2013/01/ds_css6.gif" width="260" height="107" /></a> <a href="#st_7"><img class="alignnone size-full wp-image-2260" title="样式七" alt="样式七" src="https://jay.tg/usr/uploads/2013/01/ds_css7.gif" width="260" height="107" /></a> <a href="#st_8"><img class="alignnone size-full wp-image-2261" title="样式八" alt="样式八" src="https://jay.tg/usr/uploads/2013/01/ds_css8.gif" width="260" height="107" /></a> <a href="#st_9"><img class="alignnone size-full wp-image-2262" title="样式九" alt="样式九" src="https://jay.tg/usr/uploads/2013/01/ds_css9.gif" width="263" height="105" /></a></p><p>ps:  代码都是共通的，不局限于多说，应用在别的效果上也是可以的。</p><p>next ps:  汗差一个就凑够十个了。</p><p>&nbsp;</p><h3></h3><p><a id="st_1" name="st_1"></a></p><h3>样式一</h3><p><img class="alignnone size-full wp-image-2254" alt="ds_css1" src="https://jay.tg/usr/uploads/2013/01/ds_css1.gif" width="260" height="107" /></p><pre>
#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: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }

100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@-moz-keyframes rotateInDownLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }
}

@-o-keyframes rotateInDownLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
#ds-reset .ds-avatar img{
    -webkit-animation-name: rotateInDownLeft;
    -moz-animation-name: rotateInDownLeft;
    -o-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}
#ds-reset .ds-avatar img:hover{
    -webkit-animation-name: rotateOutDownLeft;
    -moz-animation-name: rotateOutDownLeft;
    -o-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@-moz-keyframes rotateOutDownLeft {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(90deg);
        opacity: 0;
    }
}
@-o-keyframes rotateOutDownLeft {
    0% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -o-transform-origin: left bottom;
        -o-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
</pre><h3></h3><p><a id="st_2" name="st_2"></a></p><h3>样式二</h3><p><img class="alignnone size-full wp-image-2255" alt="ds_css2" src="https://jay.tg/usr/uploads/2013/01/ds_css2.gif" width="260" height="107" /></p><pre>
#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 bounceIn {
	0% {
	opacity:0;
	-webkit-transform:scale(.3);
}
50% {
	opacity:1;
	-webkit-transform:scale(1.05);
}
70% {
	-webkit-transform:scale(.9);
}
100% {
	-webkit-transform:scale(1);
}
}
@-moz-keyframes bounceIn {
	0% {
	opacity:0;
	-moz-transform:scale(.3);
}
50% {
	opacity:1;
	-moz-transform:scale(1.05);
}
70% {
	-moz-transform:scale(.9);
}
100% {
	-moz-transform:scale(1);
}
}
@-o-keyframes bounceIn {
	0% {
	opacity:0;
	-o-transform:scale(.3);
}
50% {
	opacity:1;
	-o-transform:scale(1.05);
}
70% {
	-o-transform:scale(.9);
}
100% {
	-o-transform:scale(1);
}
}
@keyframes bounceIn {
	0% {
	opacity:0;
	transform:scale(.3);
}
50% {
	opacity:1;
	transform:scale(1.05);
}
70% {
	transform:scale(.9);
}
100% {
	transform:scale(1);
}
}
#ds-reset .ds-avatar img {
	-webkit-animation-name:bounceIn;
	-moz-animation-name:bounceIn;
	-o-animation-name:bounceIn;
	animation-name:bounceIn;
}
@-webkit-keyframes bounceOut {
	0% {
	-webkit-transform:scale(1);
}
25% {
	-webkit-transform:scale(.95);
}
50% {
	opacity:1;
	-webkit-transform:scale(1.1);
}
100% {
	opacity:0;
	-webkit-transform:scale(.3);
}
}
@-moz-keyframes bounceOut {
	0% {
	-moz-transform:scale(1);
}
25% {
	-moz-transform:scale(.95);
}
50% {
	opacity:1;
	-moz-transform:scale(1.1);
}
100% {
	opacity:0;
	-moz-transform:scale(.3);
}
}
@-o-keyframes bounceOut {
	0% {
	-o-transform:scale(1);
}
25% {
	-o-transform:scale(.95);
}
50% {
	opacity:1;
	-o-transform:scale(1.1);
}
100% {
	opacity:0;
	-o-transform:scale(.3);
}
}
@keyframes bounceOut {
	0% {
	transform:scale(1);
}
25% {
	transform:scale(.95);
}
50% {
	opacity:1;
	transform:scale(1.1);
}
100% {
	opacity:0;
	transform:scale(.3);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-animation-name:bounceOut;
	-moz-animation-name:bounceOut;
	-o-animation-name:bounceOut;
	animation-name:bounceOut;
}
</pre><h3></h3><p><a id="st_3" name="st_3"></a></p><h3>样式三</h3><p><img class="alignnone size-full wp-image-2256" alt="ds_css3" src="https://jay.tg/usr/uploads/2013/01/ds_css3.gif" width="260" height="107" /></p><pre>
#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;
}
</pre><h3></h3><p><a id="st_4" name="st_4"></a></p><h3>样式四</h3><p><img class="alignnone size-full wp-image-2257" alt="ds_css4" src="https://jay.tg/usr/uploads/2013/01/ds_css4.gif" width="260" height="107" /></p><pre>
#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 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); }
}

#ds-reset .ds-avatar 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);
}
}

#ds-reset .ds-avatar img:hover{
-webkit-animation-name: rollOut;
-moz-animation-name: rollOut;
-o-animation-name: rollOut;
animation-name: rollOut;
}
</pre><h3></h3><p><a id="st_5" name="st_5"></a></p><h3>样式五</h3><p><img class="alignnone size-full wp-image-2258" alt="ds_css5" src="https://jay.tg/usr/uploads/2013/01/ds_css5.gif" width="260" height="107" /></p><pre>
#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 swing {
	20%,40%,60%,80%,100% {
	-webkit-transform-origin:top center;
}
20% {
	-webkit-transform:rotate(15deg);
}
40% {
	-webkit-transform:rotate(-10deg);
}
60% {
	-webkit-transform:rotate(5deg);
}
80% {
	-webkit-transform:rotate(-5deg);
}
100% {
	-webkit-transform:rotate(0deg);
}
}
@-moz-keyframes swing {
	20% {
	-moz-transform:rotate(15deg);
}
40% {
	-moz-transform:rotate(-10deg);
}
60% {
	-moz-transform:rotate(5deg);
}
80% {
	-moz-transform:rotate(-5deg);
}
100% {
	-moz-transform:rotate(0deg);
}
}
@-o-keyframes swing {
	20% {
	-o-transform:rotate(15deg);
}
40% {
	-o-transform:rotate(-10deg);
}
60% {
	-o-transform:rotate(5deg);
}
80% {
	-o-transform:rotate(-5deg);
}
100% {
	-o-transform:rotate(0deg);
}
}
@keyframes swing {
	20% {
	transform:rotate(15deg);
}
40% {
	transform:rotate(-10deg);
}
60% {
	transform:rotate(5deg);
}
80% {
	transform:rotate(-5deg);
}
100% {
	transform:rotate(0deg);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-transform-origin:top center;
	-moz-transform-origin:top center;
	-o-transform-origin:top center;
	transform-origin:top center;
	-webkit-animation-name:swing;
	-moz-animation-name:swing;
	-o-animation-name:swing;
	animation-name:swing;
}
</pre><h3></h3><p><a id="st_6" name="st_6"></a></p><h3>样式六</h3><p><img class="alignnone size-full wp-image-2259" alt="ds_css6" src="https://jay.tg/usr/uploads/2013/01/ds_css6.gif" width="260" height="107" /></p><pre>
#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 pulse {
	0% {
	-webkit-transform:scale(1);
}
50% {
	-webkit-transform:scale(1.1);
}
100% {
	-webkit-transform:scale(1);
}
}
@-moz-keyframes pulse {
	0% {
	-moz-transform:scale(1);
}
50% {
	-moz-transform:scale(1.1);
}
100% {
	-moz-transform:scale(1);
}
}
@-o-keyframes pulse {
	0% {
	-o-transform:scale(1);
}
50% {
	-o-transform:scale(1.1);
}
100% {
	-o-transform:scale(1);
}
}
@keyframes pulse {
	0% {
	transform:scale(1);
}
50% {
	transform:scale(1.1);
}
100% {
	transform:scale(1);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-animation-name:pulse;
	-moz-animation-name:pulse;
	-o-animation-name:pulse;
	animation-name:pulse;
}
</pre><h3></h3><p><a id="st_7" name="st_7"></a></p><h3>样式七</h3><p><img class="alignnone size-full wp-image-2260" alt="ds_css7" src="https://jay.tg/usr/uploads/2013/01/ds_css7.gif" width="260" height="107" /></p><pre>
#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 wobble {
	0% {
	-webkit-transform:translateX(0%);
}
15% {
	-webkit-transform:translateX(-25%) rotate(-5deg);
}
30% {
	-webkit-transform:translateX(20%) rotate(3deg);
}
45% {
	-webkit-transform:translateX(-15%) rotate(-3deg);
}
60% {
	-webkit-transform:translateX(10%) rotate(2deg);
}
75% {
	-webkit-transform:translateX(-5%) rotate(-1deg);
}
100% {
	-webkit-transform:translateX(0%);
}
}
@-moz-keyframes wobble {
	0% {
	-moz-transform:translateX(0%);
}
15% {
	-moz-transform:translateX(-25%) rotate(-5deg);
}
30% {
	-moz-transform:translateX(20%) rotate(3deg);
}
45% {
	-moz-transform:translateX(-15%) rotate(-3deg);
}
60% {
	-moz-transform:translateX(10%) rotate(2deg);
}
75% {
	-moz-transform:translateX(-5%) rotate(-1deg);
}
100% {
	-moz-transform:translateX(0%);
}
}
@-o-keyframes wobble {
	0% {
	-o-transform:translateX(0%);
}
15% {
	-o-transform:translateX(-25%) rotate(-5deg);
}
30% {
	-o-transform:translateX(20%) rotate(3deg);
}
45% {
	-o-transform:translateX(-15%) rotate(-3deg);
}
60% {
	-o-transform:translateX(10%) rotate(2deg);
}
75% {
	-o-transform:translateX(-5%) rotate(-1deg);
}
100% {
	-o-transform:translateX(0%);
}
}
@keyframes wobble {
	0% {
	transform:translateX(0%);
}
15% {
	transform:translateX(-25%) rotate(-5deg);
}
30% {
	transform:translateX(20%) rotate(3deg);
}
45% {
	transform:translateX(-15%) rotate(-3deg);
}
60% {
	transform:translateX(10%) rotate(2deg);
}
75% {
	transform:translateX(-5%) rotate(-1deg);
}
100% {
	transform:translateX(0%);
}
}
#ds-reset .ds-avatar img:hover {
	-webkit-animation-name:wobble;
	-moz-animation-name:wobble;
	-o-animation-name:wobble;
	animation-name:wobble;
}
</pre><h3></h3><p><a id="st_8" name="st_8"></a></p><h3>样式八</h3><p><img class="alignnone size-full wp-image-2261" alt="ds_css8" src="https://jay.tg/usr/uploads/2013/01/ds_css8.gif" width="260" height="107" /></p><pre>
#ds-reset .ds-avatar img {
	width:54px;
	height:54px;
	/*设置图像的长和宽，这里要根据自己的评论框情况更改*/
border-radius:27px;
	/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/
-webkit-border-radius:27px;
	/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:27px;
	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;
}
#ds-reset .ds-avatar 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);
}
</pre><h3></h3><p><a id="st_9" name="st_9"></a></p><h3>样式九</h3><p><img class="alignnone size-full wp-image-2262" alt="ds_css9" src="https://jay.tg/usr/uploads/2013/01/ds_css9.gif" width="263" height="105" /></p><pre>
#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: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;
}
@-webkit-keyframes flip {
0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}
40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function: ease-out;}
50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function: ease-in;}
80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function: ease-in;}
100% {-webkit-transform: perspective(400px) scale(1);-webkit-animation-timing-function: ease-in;}
}

@-moz-keyframes flip {
0% {-moz-transform: perspective(400px) rotateY(0);-moz-animation-timing-function: ease-out;}
40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function: ease-out;}
50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function: ease-in;}
80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function: ease-in;}
100% {-moz-transform: perspective(400px) scale(1);-moz-animation-timing-function: ease-in;}
}
@-o-keyframes flip {
0% {-o-transform: perspective(400px) rotateY(0);-o-animation-timing-function: ease-out;}
40% {-o-transform: perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function: ease-out;}
50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function: ease-in;}
80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
100% {-o-transform: perspective(400px) scale(1);-o-animation-timing-function: ease-in;}
}
@keyframes flip {
0% {transform: perspective(400px) rotateY(0);animation-timing-function: ease-out;}
40% {transform: perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function: ease-out;}
50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function: ease-in;}
80% {transform: perspective(400px) rotateY(360deg) scale(.95);animation-timing-function: ease-in;}
100% {transform: perspective(400px) scale(1);animation-timing-function: ease-in;}
}
</pre><p></pre><br />
<a title="JiaJieChan(陈家杰)个人主页" href="http://www.jiajieit.net" target="_blank">JiaJieChan</a>个人对第三方的评论木有需要，所以把这个样式应用到自用的inove主题上了，效果可以移动到各条评论看看。</p><p>移动到评论头像就会摇摆一下，就像树叶随风摇摆，太有爱了！   7:)</p><p>&nbsp;</p><p>本文转载自 <a href="http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html" target="_blank">http://www.vsay.cn/one-more-custom-css-lets-you-say-comments-city.html</a></p><p>&nbsp;</p>

正文开始

下面是预览图片，看到好看的样式，点击图片试试！

样式一

样式二

样式三

样式四

样式五

样式六

样式七

样式八

样式九

5 comments

Leave a Comment Cancel reply 人生在世，错别字在所难免，无需纠正。

多说评论CSS样式, 在其他博客看到的Copy回来

Leave a Comment Cancel reply
人生在世，错别字在所难免，无需纠正。