我的多说CSS样式分享

建站相关 myhloli 19482次浏览 已收录 42个评论

QQ截图20150130052920 - 副本

有同学看到我的博客多说评论框中的头像会旋转,感觉非常有意思,其实几段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:50px !important;height: 50px !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:30px !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:30px !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:50px !important;}
#ds-thread #ds-reset .ds-replybox{padding: 0 0 0 80px !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;}
/*多说附加样式结束*/

以下代码是最近留言处圆形头像旋转代码

/** 多说最近留言样式 **/
#ds-recent-comments .ds-avatar img{   
    width:54px;height:54px; /*设置图像的长和宽,这里要根据自己的评论框情况更改*/  
    border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/  
    -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/  
    -moz-border-radius:27px;   
    box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/  
    -webkit-box-shadow: inset 0 -1px 0 #3333sf;   
    -webkit-transition: 0.4s;      
    -webkit-transition: -webkit-transform 0.4s ease-out;   
    transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/  
    -moz-transition: -moz-transform 0.4s ease-out;   
}    
#ds-recent-comments .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/  
    box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);   
    transform: rotateZ(360deg);/*图像旋转360度*/  
    -webkit-transform: rotateZ(360deg);   
    -moz-transform: rotateZ(360deg);   
}

下面是昨天在anotherhome偷的评论框背景图

/** 扑街 **/
#ds-thread #ds-reset .ds-textarea-wrapper textarea {
background: url(https://diygod.qiniudn.com/plbj.png) right no-repeat;}

理论上使用自己的图片替换上面的png地址可以自行更换背景图,注意分辨率。

  萝莉社,版权所有丨如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://myhloli.com/duoshuo-css.html
喜欢 (18)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(42)个小伙伴在吐槽
  1. 旋转代码没用。。。。在我的上
    Tiger Lee2016-08-21 13:32 回复
  2. 博主分享的这个很好,已经用上了
    HappyDays2016-06-23 00:38 回复
  3. 头像图片没有了
    七颜2016-06-14 10:49 回复
  4. 可以
    sherlockz2016-06-03 14:54 回复
  5. [哈哈][哈哈]
    小G乐园2016-04-04 17:25 回复
  6. 博主 请问页面这个挂件 怎么实现的呀 好可爱~ 好想带走啊 喵~~
    Enp丶棒棒餹oO2016-02-26 15:58 回复
  7. 66666
    外贸协会2016-01-27 14:17 回复
  8. 星扉2016-01-20 20:47 回复
  9. 头像旋转的,博主改动了。变为类似:#ds-thread #ds-reset >.ds-comments> li.ds-post:hover img {} 的时候头像旋转,就是鼠标只有碰到 .ds-post 就会。我已经99%还原了。谢谢。
    星扉2016-01-20 20:44 回复
  10. 不太懂前端,当拖动到出现头像的时候才转动是如何实现?
    星扉2016-01-19 16:56 回复
  11. 嘻嘻
    ok2015-12-11 10:36 回复
  12. [抱抱]
    myhloli2015-11-03 22:23 回复
  13. 我在想,改了那么多,待会儿一个主题更新,就蛋疼了……
    缙哥哥的博客2015-10-08 12:25 回复
  14. 这个浏览器前面的博主标记是怎么做的
    轻狂夏至2015-09-04 14:35 回复
  15. 请问本站的背景图片怎么实现的啊,谢谢!
    zean2015-07-17 15:38 回复
    • 网站背景图?主题带的。。
      myhloli2015-07-17 22:36 回复
  16. 我想说左下角加载效果不错好科幻
    之行2015-04-04 20:22 回复
  17. 转的头晕。。
    OIK_JINN2015-02-25 11:50 回复
    • 晕就对了
      myhloli2015-02-25 12:29 回复
      • 请问是wordpress么,感觉设计的挺好的~
        OIK_JINN2015-02-25 15:42 回复
        • 博客是WordPress,评论框是多说
          myhloli2015-02-25 15:47 回复
          • soga,总体感觉很好呢~博主好年轻,后生可畏~
            OIK_JINN2015-02-25 15:51
  18. 非常棒
    品果屋2015-02-22 08:56 回复
  19. 那个什么浏览器 什么系统电脑怎么搞得
  20. 代码高亮是什么插件
    liwanglin122015-01-30 13:19 回复
    • 不知道啥插件,主题自带的,着色方案是google-code-prettyprint
      myhloli2015-01-30 13:39 回复
    • 怎么感觉圈子那么小(*/∇\*)
      DIYgod2015-02-10 03:39 回复
      • 这是【圆环之理】的阴谋
        myhloli2015-02-10 18:00 回复
加载中……