轩枫阁

首页 / Web前端 / CSS / 多说头像CSS样式自定义-让评论更炫酷

多说头像CSS样式自定义-让评论更炫酷

阅读：66435 评论：33 作者：ivan 分类：CSS、Web前端

前言

所谓的社会化评论，即网站的评论系统集成“QQ、QQ空间、新浪微博，人人网、豆瓣”等社交账号及第三方平台的单点登录功能，实时评论同步，实名制留言将大大提高评论的质量和传播效率。通过插件安装、插入代码等方式使用社会化评论。如今wordpress、DedeCMS、DISCUZ等众多博客均可使用。

现今的社会化评论系统，主要有：友言、多说、畅言、灯鹭。

轩枫阁从13年3月上线时，一直使用多说，只因其UI及体验吸引住了我。使用灰色背景，完美搭配多说自带主题，无需自定义CSS。但是最近发现多说的自定义CSS功能结合CSS3可以做一些炫酷的效果，主要是针对头像。

关于多说

多说是一款追求极致体验的社会化评论框，可以用微博、QQ、人人、豆瓣等帐号登录并评论。多说帮助用户搭建更活跃，更互动的评论平台，功能强大且永久免费。它正在改变网站与用户之间，用户与用户之间的互动方式。这个专门基于社交网络的评论系统，能够轻松的帮网站主搭建自己互动性极强的社区，让留言的用户都有“家”的感觉。

效果图

以下效果主要结合CSS3，所以只在Chrome、Firefox、Safari等浏览器中有效果哦~上图

 

1

效果一

2

效果二

3

效果三

4

效果四

5

效果五

6

效果六

7

效果七

8

效果八

9

效果九

 

CSS代码

将需要用到的代码，填到多说的自定义CSS中即可。以Wordpress为例，在后台的对应位置填写。

`DE@V4TYLP9HWL`$7YRGWX6

 

 

效果一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
#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;  
    }  
}

效果二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
#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;  
}

效果三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
#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;  
}

效果四

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
#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;  
}

效果五

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
#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;  
}

效果六

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#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;  
}

效果七

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#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;  
}

效果八

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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);  
}

效果九

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#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;}  
}

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

211/470
213/470

相关阅读

文章评论

取消回复
  • 怎样买股票

    谢谢分享，收藏备用啊

    2016 年 9 月 18 日 上午 7:47
  • 《EDM邮件营销》

    顶。。一定得顶。。。。

    2016 年 8 月 27 日 下午 11:12
  • 崔小可

    我用了效果八很棒，谢谢分享！[可爱]

    2016 年 4 月 17 日 下午 10:37
  • 汤不热营销

    [右哼哼] 顶。。一定得顶。。。。

    2016 年 4 月 1 日 上午 3:16
  • 百度云盘

    百度云盘www.144n.com

    2016 年 3 月 13 日 下午 3:49
  • 爱样板

    头像不显示是什么原因

    2015 年 11 月 10 日 下午 6:58
  • 黄色网站

    多说是一款追求极致体验的社会化评论框，可以用微博、QQ、人人、豆瓣等帐号登录并评论。多说帮助用户搭建更活跃，更互动的评论平台，功能强大且永久免费。它正在改变网站与用户之间，用户与用户之间的互动方式。这个专门基于社交网络的评论系统，能够轻松的帮网站主搭建自己互动性极强的社区，让留言的用户都有“家”的感觉。

    2015 年 10 月 29 日 下午 4:40
  • 糗事百科

    太厉害啦！值得我们学习

    2015 年 10 月 1 日 上午 11:24
  • Danny_吕昌辉

    怎么我设置了之后没效果呢

    2015 年 9 月 14 日 下午 2:05
  • 爱奇趣分享网

    秒赞不是偶然,是一种态度!

    2015 年 9 月 7 日 下午 3:04
  • 最励志网

    不错 学习了！

    2015 年 8 月 4 日 上午 10:34
  • seo

    2015 年 6 月 17 日 下午 4:14
  • 三亚婚纱摄影

    看着都醉了

    2015 年 5 月 20 日 下午 11:13
  • 何捷浪

    这个好！！萌菌网www.moejun.tv/

    2015 年 4 月 20 日 下午 10:20
  • netcan

    请问下怎么折叠多说评论框啊？

    2015 年 3 月 25 日 下午 11:56
    • 轩枫

      折叠？是这里的层级吗？

      2015 年 3 月 26 日 下午 9:13
      • netcan

        嗯，解决了。。

        2015 年 3 月 26 日 下午 9:37
  • 牛逼思维

    单排紧凑型的样式好像没人整出来

    2015 年 3 月 18 日 下午 5:27
    • 轩枫

      你整一个呗

      2015 年 3 月 18 日 下午 7:30
      • 牛逼思维

        试过，不完美。。多说也不重视。。

        2015 年 3 月 18 日 下午 9:55
  • 网赚博客(www.51xingheng.com)

    不错，选了一个

    2015 年 2 月 15 日 下午 2:55
  • ⒏o後紅人

    http://www.bsh.me看这里

    2015 年 1 月 31 日 下午 6:45
  • 淘宝装修免费模板

    很不错的效果

    2015 年 1 月 16 日 上午 8:29
  • 菜菜爱电影

    多说，我不小心设置了用户默认头像，没办法取消呀，有大神帮我吗

    2015 年 1 月 10 日 上午 12:25
  • 随风落叶

    嘿嘿

    2014 年 12 月 21 日 下午 10:01
  • 自媒体网赚博客

    多说评论跟着下面回复是一个小头像，这个是怎么弄的？ 麻烦说一下

    2014 年 11 月 12 日 下午 9:18
    • 轩枫

      没明白指的是哪个头像呢

      2014 年 11 月 12 日 下午 10:33
  • 自媒体网赚博客

    学习了，干货啊，记得踩踩我的博客喔~~~

    2014 年 11 月 12 日 下午 9:05
  • ⒏o後紅人

    介个不错，用多说的必看！

    2014 年 9 月 5 日 下午 5:52
  • ⒏o後紅人

    介个不错，用多说的必看！

    2014 年 9 月 5 日 下午 5:52
    • 轩枫

      必看必用

      2014 年 9 月 19 日 下午 8:52
  • Zhang

    好文章应用了

    2014 年 9 月 1 日 下午 8:26
    • 轩枫

      赞一个，文章这么长，竟然拉下来评论了

      2014 年 9 月 3 日 上午 12:19

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间