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

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

自从多说关闭后，评论插件越来越少了。而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;}

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

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » CSS3实现一款漂亮的留言代码