CSS3实现一款漂亮的留言代码

自从多说关闭后，评论插件越来越少了。而WordPress自带的评论框非常的简陋，看起来就没有评论的欲望。本文将使用CSS3实现一款漂亮的留言代码，赶紧跟着一起改动你的博客评论框吧！

先阅览一下运行效果吧！

主要的html代码如下：

<div class="ds-post-main">
	<div class="ds-avatar">
		<a title="" href="https://www.xttblog.com" target="_blank"><img alt="" src="http://tp3.sinaimg.cn/1750584642/50/5612846168/1"></a>
	</div>
	<div class="ds-comment-body">
		<a title="" href="https://www.xttblog.com" target="_blank" class="user-name"></a>
		<p>"是不是上了5天班了？"、"以为是周末了？"、"今天才周三，哈哈！"。</p>
		<p>"是不是要考试啦？"、"还没复习吧？"、"等死吧，哈哈哈哈"。</p>
		<p>"在公司坐了一上午了吧"、"忙得没时间吃午饭吧？"、"我已经吃过了，哈哈哈哈！"</p>
	</div>
</div>

剩下的就是CSS3代码了。

/* ：www.xttblog.com */
.ds-post-main {position:relative;margin-bottom:30px;}
.ds-avatar {z-index:2;position:absolute;top:48px;left:-20px;padding:5px;width:36px;height:36px; border-radius:50%; box-shadow:-1px 0 1px rgba(0,0,0,.15) inset; background:#E5E6D0 url(http://www.shejidaren.com/wp-content/themes/Daren/images/bg.jpg) repeat 0 0;}
.ds-avatar a {display:block; padding:1px; width:32px; height:32px; border:1px solid #B9BAA6; border-radius:50%; background-color:#fff; -moz-transition:color 0.15s linear; -webkit-transition:color 0.15s linear;transition:color 0.15s linear;}
.ds-avatar img {display:block;width:32px; height:32px;border-radius:50%;box-shadow:0 1px 5px rgba(0, 0, 0, 0.22)}
.ds-comment-body, .ds-avatar, .ds-avatar a,
.ds-avatar img {-webkit-transition:.4s all ease-in-out;-moz-transition:.4s all ease-in-out;-o-transition:.4s all ease-in-out;-ms-transition:.4s all ease-in-out;transition:.4s all ease-in-out}
.ds-post-main:hover .ds-avatar img {-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
.ds-comment-body {z-index:1;position:relative;left:0;background: #F0F0E3;padding:15px 15px 15px 47px;color:#696A52; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.75) inset;}
/* ：www.xttblog.com */
.ds-post-main:hover .ds-comment-body {left:40px;}
.ds-post-main:hover .ds-avatar:after,.ds-post-main:hover .ds-avatar a:after,.ds-post-main:hover .ds-avatar a:before { position:absolute; content:'+'; font-size:18px;font-weight:bold; font-family:Arial, Helvetica, sans-serif;color:#696A52}
.ds-post-main:hover .ds-avatar:after {top:14px;left:56px}
.ds-post-main:hover .ds-avatar a:after {top:9px;left:48px;}
.ds-post-main:hover .ds-avatar a:before {top:9px;left:-29px;}
.ds-post-main:hover .ds-avatar {left:-40px;}
.ds-post-main:hover .ds-avatar a {position:relative;left:-80px;}
.ds-post-main:hover .ds-avatar a img{position:relative;left:-80px;}

有兴趣的同学可以整理进自己博客中的评论框中，优化自己的视觉体验。

： » CSS3实现一款漂亮的留言代码