网站建设

分享一个多说头像的动态酷炫CSS样式

Jager · 4月27日 · 2014年 · · · 4151次已读

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

分享一个多说头像的动态酷炫CSS样式(喜欢的可以去图中的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: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;}
/*多说附加样式结束*/

使用方法:

方法 ①、可以将以上代码贴到主题的style.css中,保存即可

方法 ②、如下图所示,将以上代码贴到多说个性化设置的CSS样式框当中:

 

分享一个多说头像的动态酷炫CSS样式

 

具体效果,你在本文留言就可以看到啦!嘿嘿!

43 条回应
  1. 啪啪啪博客2014-4-27 · 20:40

    很不错哦

    • Jager2014-4-27 · 20:46

      你的博客提示我:IP已被屏蔽,请勿发表垃圾评论。。。

      • 啪啪啪博客2014-4-27 · 21:34

        不是吧

        • Jager2014-4-28 · 7:20

          垃圾审核太严格了。。。前几天我去留言,条条被拒,也不是垃圾评论啊。不懂。

          • 啪啪啪博客2014-4-28 · 15:57

            应该没事了,我把那个反垃圾的禁用了

  2. 受用。

  3. 漫道狂徒2014-4-28 · 15:54

    看着很不错哈

  4. 三日月2014-4-28 · 18:32

    哈哈,因为我之前啥都没干,多说的样式也没去改的

  5. 阿里百秀2014-4-28 · 18:43

    话说这个意义不大,也不怎么好看嘛

    • Jager2014-4-28 · 18:49

      那我只能说萝卜白菜,各有所好了。。。

  6. 圆月博客2014-4-29 · 9:47

    这个会不会影响加载速度呢

    • Jager2014-4-29 · 11:13

      就多了几行CSS代码而已,无影响,除非来访者用的是超垃圾电脑。

  7. 美食屋2014-4-30 · 23:31

    [嘻嘻] 搞那么复杂干嘛。

    • Jager2014-5-1 · 9:10

      分享而已,喜欢就用。不喜欢就不用嘛。总是有人喜欢的

  8. 郭爱兵2014-5-1 · 11:22

    以前我也用了v说的那九种、不过感觉还是不满意、现在还是用自己的评论框架好!要是能把自己的那个评论也弄个css头像效果就好了~

    • Jager2014-5-1 · 16:48

      一样可以的,只要把CSS的ID改成你现在的就行了。。。

  9. 龙三公子2014-5-10 · 21:54

    还是挺炫的,看一下我调用的代码要怎么搞。

  10. 萌妹2014-5-10 · 22:27

    [嘻嘻] 你这个转的很快 我的那个慢点 貌似我的是响应鼠标

    • Jager2014-5-10 · 22:30

      我调节了。。。转了720°

      • 萌妹2014-5-10 · 22:47

        搜噶 把这个效果应用到那个 留言墙上面 不知道怎么样

  11. 德均吧2014-5-11 · 13:02

    frontopen2这主题说实在的还是不错的

    • Jager2014-5-11 · 13:41

      是很棒的主题,要是我早点接触应该也会用那个。响应式,扁平化。

      • 德均吧2014-5-11 · 19:27

        品味这主题手机优化的相当漂亮啊

  12. 兔子酱2014-6-3 · 14:43

    摘录了 [兔子]

  13. 风色番茄2014-9-16 · 11:51

    谢谢,拿去用了。

    • Jager2014-9-16 · 12:26

      能用就好~欢迎常来。

  14. 挖资源部落2015-4-4 · 18:10

    每次来到你家 习惯性的想起小兵张嘎 哈哈哈

  15. Although2015-4-18 · 1:29

    评论时头像大 评论框小怎么解决呢

  16. 周杰伦视频网2015-6-21 · 18:21

    签到成功!签到时间:下午6:20:43,每日签到,生活更精彩哦~
    试试盗链

  17. 园子大魔王2015-9-16 · 18:25

    撸一撸

  18. ICHARM2015-11-9 · 9:06

    这个酷炫

  19. 小超2016-3-2 · 17:01

    哈哈,无语中发现博主居然折腾过多说,厉害,不过自从跟着博主变成https后,就和多说拜拜了 😥

    • Jager2016-3-2 · 20:09

      多说貌似已经支持https了,去官方看看

  20. 爱时尚2016-6-2 · 16:48

    请问多说那个调用头像的头像墙要怎么做,能指点吗

  21. 跨境电商平台2016-7-6 · 22:25

    非常不错!!!!

  22. 博主你好2016-9-13 · 10:41

    你好,可以分享你的打赏源码吗?

    • Jager2016-9-13 · 13:14

      博客最新文章已分享

  23. 小面包2016-9-13 · 12:01

    真不错,收藏了。

  24. 玉米棒2016-12-16 · 14:05

    不错的值得学习