分享一个多说头像的动态酷炫CSS样式 | 张戈博客

  • 时间:
  • 浏览:1

记得,之后看完V说分享了九种多说头像的酷炫样式,当时我选的是第八种,如下圆形旋转样式:

(喜欢的要能去图中的vsay网址获取,让人不做搬运工了)

之后在Moreopen博客发现更炫的多说动感头像,当时问博主要能分享一下代码,你爱不爱我是主题自带,有之后还有点儿不信,之后在APP雄起博客那又看完了你你你是什么 多说样式,才知道觉得是frontopen2主题自带的!

于是,我直接从主题CSS中间扒了出来,稍微改了一些点效果(作者莫怪~),分享给各位使用多说的博友:

/*多说附加样式*/
#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:1000px !important;height: 1000px !important;-webkit-transition: .8s;-moz-transition: .8s;-o-transition: .8s;-ms-transition: .8s;padding:3px;border: 1px solid #ddd;background: #fff;}
.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:1000px !important;}
#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:1000px !important;}
#ds-thread #ds-reset .ds-comment-body, #ds-thread #ds-reset ul.ds-children .ds-comment-body{padding-left:70px !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:1000px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 1000px !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;}
/*多说附加样式始于英文*/

使用土妙招 :

土妙招 ①、要能将以上代码放入主题的style.css中,保存即可

土妙招 ②、如下图所示,将以上代码放入多说个性化设置的CSS样式框当中:

具体效果,你在本文留言就要能看完啦!嘿嘿!