多说自定义css样式,含头像圆角/渐变/右置效果,超霸气
2015-01-17 多说自定义CSS , 多说CSS样式 , 多说

今天又将多说自定义css给美化了下,用了梦月酱自制的大头像多说评论CSS样式;

感觉效果不错给大家分享个:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18
#ds-thread {clear: both;position: relative;overflow: visible;_zoom: 1;display: inline-block;width: 100%;color: #3498DB;}
#ds-thread #ds-reset {color: #3498DB;}
#ds-thread .ds-powered-by{display:none!important;}
#ds-thread #ds-reset .ds-comment-body {padding: 20px 20px 20px 20px;border: 1px solid #E2E2E2;list-style: none;background: -webkit-linear-gradient(#ffffff, #fafafa);background: -moz-linear-gradient(#ffffff, #fafafa);border-radius: 5px 5px 5px 5px;-webkit-box-shadow: -3px 1px 13px #ddd;-moz-box-shadow: -3px 1px 13px #ddd;box-shadow: -3px 1px 13px #ddd;}
#ds-thread .ds-avatar{margin: 20px 20px 30px 30px;float: right;}
#ds-thread #ds-reset .ds-paginator {text-align: center;border:0px;}
#ds-thread #ds-reset li.ds-post {border:0px;}
#ds-thread #ds-reset .ds-comments {border:0px;}
#ds-reset .ds-avatar img {display: block;width: 70px;height: 70px;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}
#ds-thread #ds-reset .ds-comment-header {margin: 8px 0px;line-height: 28px;font-size: 16px;text-transform: uppercase;padding-left: 0px;border-bottom: 3px solid #ddd;}
#ds-thread #ds-reset .ds-comment-footer {float: right;line-height: 0;}
#ds-reset .ds-highlight {color: #2980B9 !important;}
#ds-thread #ds-reset .ds-sort a.ds-current, #ds-thread #ds-reset .ds-sort a:active {color: #2980B9;}
#ds-thread #ds-reset .ds-login-buttons {display:none}
#ds-thread #ds-reset li.ds-tab a.ds-current {display:none}
#ds-wrapper #ds-reset .ds-dialog-footer {display:none}
#ds-thread #ds-reset #ds-bubble {display:none}
#ds-thread #ds-reset .ds-replybox {padding: 0 0 0 120px;}

将上面代码添加到多说个性化设置中/自定义CSS中保存即可。

原文:http://www.wysafe.com/blog/667.html

加上爱必应原来的多说头像渐变效果:

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

191
#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-thread .ds-powered-by{display:none!important;}

将上面两段代码一起加到多说自定义CSS中,(含去多说版权)就能实现本站的效果了:

[caption id="attachment_2605" align="aligncenter" width="756"]多说自定义css样式,含头像圆角/渐变/右置效果 多说自定义css样式效果图[/caption]

注意:使用后评论框上面的“最新、最早、最热”无法使用、不过这地方应该没人用吧?

  1. 自己试个。

  2. 嵌套回复有点小问题

    1. 这就被发现了...好不容易找个霸气适合我的,怎么这么多毛病呢 还是继续用着、比这个好看的应该没有了吧~

      1. 总体很不错,细节小修一下就行啦

  3. 博主首页我感觉四竖排,每个框有个边框好看点,个人看法

    1. 主题默认就这样、不会改代码

    2. 这么快就关站了 备案资料给提交了?

  4. 不错的css,可惜我不用多说了

  5. seo seo

    seo http://blog.sina.com.cn/seozhanwang

  6. seo seo

    博主文章不错哦,我涨姿势了

  7. 第一次来你博客,文章不错哦,我涨姿势了,求认识啊博主,求回访www.aiyw.net

  8. 刚好用的上,谢谢博主!

  9. 什么啊

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

    1. 大帅哥 大帅哥

      哈哈哈

Leave a Reply

如果您是第一次在本站留言,需要审核后才会显示内容!