目录 【博客美化】评论带头像，且支持旋转 1.效果图 2.添加CSS代码 3.上传JavaScript文件 4.引入JavaScript文件 5：页脚Html代码 Return Top 【博客美化】评论带头像，且支持旋转 好久没有更新关于博客园页面美化的文章了，这一次主要是写一下关于评论带头像，且支持旋转的内容，希望各位小伙伴能够喜欢！！！ 1.效果图 2.添加CSS代码 设置-页面定制CSS代码 .feedbackCon img:hover { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); transform: rotateZ(360deg); } .feedbackCon img { border-radius: 40px; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } 3.上传JavaScript文件 文件地址：https://blog-static.cnblogs.com/files/jackson0714/Comments.js 下面是参考农码一生的JavaScript脚本。 ** Comments.js** function customTimer(inpId, fn) { if ($(inpId).length) { fn(); } else { var intervalId = setInterval(function () { if ($(inpId).length) { //如果存在了 clearInterval(intervalId); // 则关闭定时器 customTimer(inpId, fn); //执行自身 } }, 100); } } //添加 评论区的 形象照 function addImage() { var spen_html = "\ "; $(".blog_comment_body").append(spen_html); $(".blog_comment_body").before(""); var feedbackCon = $(".feedbackCon").addClass("clearfix"); for (var i = 0; i < feedbackCon.length; i++) { var span = $(feedbackCon[i]).find("span:last")[0].innerHTML || "http://pic.cnitblog.com/face/sample_face.gif"; $(feedbackCon[i]).find(".body_right img").attr("src", span); var href = $(feedbackCon[i]).parent().find(".comment_date").next().attr("href"); $(feedbackCon[i]).find(".body_right a").attr("href", href); } } //页面加载完成是执行 $(function () { //添加 评论区的 形象照 customTimer(".blog_comment_body", addImage); }); 4.引入JavaScript文件 5：页脚Html代码 引入第二步上传的JavaScript文件Comments.js： 例如：我的就是： 总结：总的来说还是比较简单的，希望能够帮助到各位小伙伴！！ 您可以考虑给博主来个小小的打赏以资鼓励，您的肯定将是我最大的动力。 微信 支付宝 作者：落花四月 出处：https://www.cnblogs.com/lxz-1263030049/ 关于作者：潜心于网络安全学习。如有问题或建议，请多多赐教！ 版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接. 特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我 声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！ 分类: 博客园页面设置 好文要顶 关注我 收藏该文 落花四月 关注 - 2 粉丝 - 44 +加关注 2 « 上一篇：记一次对Vulnerable Docker靶机渗透全过程 » 下一篇：记一次linux中简单的命令(一） posted @ 2018-10-02 13:41 落花四月 阅读(214) 评论(1) 编辑 收藏 评论列表 #1楼 2018-10-10 11:02 从零开始的程序员生活 每次点开你的博客，电脑都要卡两秒.......... 支持(1)反对(0) 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。 公告 我的头像 蒟蒻一枚，有事您Q我～ 弱校挣扎的小萌新 我的QQ在这哦！1263030049～ 我的微信在这哦！liu1263030049 【加好友请注明姓名和来源哦，谢谢各位支持^-^】～ 喵~允许我卖一个萌~~~~ 热爱交友！orz 希望大家多多支持，觉得文章好可以点个赞! 动动你的鼠标加下关注哦! 非常乐意互换友链呐，~o( =∩ω∩= )喵~~~~ 我的头像 有事您Q我，我一直在哦~： 　　欢迎与我联系 点击图片进行喂食即可 我的访客量统计：Start From 2018.5.20 19:00 AmazingCounters.com Flag Counter 昵称：落花四月 园龄：9个月 粉丝：44 关注：2 +加关注 < 2018年12月 > 日 一 二 三 四 五 六 25 26 27 28 29 30 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 1 2 3 4 5 搜索 https://www.cnblogs.com/miraitowa/p/9736885.html