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

HTML5 herman 668浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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

先阅览一下运行效果吧!

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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