自从个人博客用上多说评论之后，一直在寻找好的评论框样式代码，昨天偶然在博客联盟看到一个样式，觉得很不错，不仅能实现评论界面样式美化，鼠标移上去就旋转360度并自动将方块边框变为圆形，而且还能实现最近访客调用的访客头像也有这个功能，看起来很炫酷，效果如下：
评论框特效展示
最近访客特效展示
具体实现的代码为：
#ds-thread #ds-reset .ds-powered-by{
display:none;
}
#ds-thread #ds-reset .ds-post-button{
font-family: '微软雅黑' 'Microsoft Yahei'!important;
font-weight: bold;
font-size:15px;
background:none !important;
color:#0196e3 !important;
}
#ds-reset .ds-avatar{background:none !important; box-shadow:none !important;}
#ds-reset .ds-avatar img , #ds-thread #ds-reset ul.ds-children .ds-avatar img{width:50px !important;height: 50px !important;-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding:3px;border: 1px solid #ddd;background: #fff;}
#ds-reset .ds-avatar img:hover{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
.ds-post:hover .ds-avatar img{transform:rotate(720deg);-webkit-transform:rotate(720deg);-moz-transform:rotate(720deg);-o-transform:rotate(720deg);-ms-transform:rotate(720deg);border-radius:30px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !important;}
.ds-post:hover{background:#eee !important;}
#ds-thread #ds-reset ul.ds-children .ds-avatar{width:50px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !important;}
#ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-body{margin-left: 68px !important;}
#ds-recent-comments li.ds-comment:nth-of-type(1){border:none !important;}
#ds-thread{ border-radius: 5px;}
.ds-recent-visitors img{
-webkit-transition: .8s;
-moz-transition: .8s;
-o-transition: .8s;
-ms-transition: .8s;
padding:3px;
border: 1px solid #ddd;
background: #fff;
}
.ds-recent-visitors img:hover{
transform:rotate(720deg);
-webkit-transform:rotate(720deg);
-moz-transform:rotate(720deg);
-o-transform:rotate(720deg);
-ms-transform:rotate(720deg);
border-radius:30px !important;
}
到多说官方网站后台，找到设置-基本设置- 自定义CSS，将代码全部复制其中即可。
资源均来自第三方，谨慎下载，前往第三方网站下载
