好看的多说自定义CSS分享

因为Ajax评论有严重问题所以我不得不重新用多说了,说实话它真的是目前国内最好的社会评论框了,虽然有点点小毛病,但是必须得说很好。

侧边栏浮动有问题,明显是javascript脚本搞的鬼,可怜我只会一点点HTML,而PHP,CSS,javascript对我来说简直就是残念!

好了,废话少说,这次我们要分享的是多说的自定义CSS,可以调整多说的评论样式。

样式效果

本站现在就换了个多说的样式,您可以看到,头像是圆的,您的鼠标移动到头像的时候会360°旋转,现在我给个图片看看:

comment-with-css

如何做到

把下面的代码复制,然后到博客后台——多说评论——个性化设置,找到“自定义CSS”后将它们粘贴上去,别忘了点击确定。

  1. #ds-reset .ds-avatar img{
  2.     width:54px;height:54px; /*设置图像的长和宽*/
  3.     border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
  4.     -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
  5.     -moz-border-radius:27px;
  6.     box-shadow: inset 0 –1px 0 #3333sf;/*设置图像阴影效果*/
  7.     -webkit-box-shadow: inset 0 –1px 0 #3333sf;
  8. }
  9. #ds-reset .ds-avatar img{
  10.     width:54px;height:54px; /*设置图像的长和宽*/
  11.     border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
  12.     -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
  13.     -moz-border-radius:27px;
  14.     box-shadow: inset 0 –1px 0 #3333sf;/*设置图像阴影效果*/
  15.     -webkit-box-shadow: inset 0 –1px 0 #3333sf;
  16.     -webkit-transition: 0.4s;
  17.     -webkit-transition: -webkit-transform 0.4s ease-out;
  18.     transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
  19.     -moz-transition: -moz-transform 0.4s ease-out;
  20. }
  21. #ds-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
  22.     box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  23.     -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  24.     transform: rotateZ(360deg);/*图像旋转360度*/
  25.     -webkit-transform: rotateZ(360deg);
  26.     -moz-transform: rotateZ(360deg);
  27. }

评论

  1. Edenharder
    7年前
    2014-2-16 2:11:34

    我尝试完全用文中提供的代码加入到自己的screen.css文件中,虽然实现了旋转功能但是头像不是圆形的(见http://ieden.gitcafe.com/2014/02/13/hello-world.html). 项目托管在https://gitcafe.com/ieden/ieden/tree/gitcafe-pages, 还请高手指点指点, 已经瞎试了好久.

  2. 8年前
    2012-12-25 13:30:43

    好多人都在用了

  3. 8年前
    2012-9-11 17:38:10

    可以定义css把使用多说给屏蔽了

  4. 8年前
    2012-9-07 13:51:57

    不错,用上了。

  5. 8年前
    2012-9-06 22:05:06

    搞走了

    • 8年前
      2012-9-09 23:47:53

      原来都是在这里学到的。。。

    • 8年前
      2012-9-09 23:47:58

      原来都是在这里学到的。。。

  6. 8年前
    2012-9-04 21:32:24

    我想问一下,为什么我的博客设置了为什么还有正方形的背景呢

    • Cysime 博主
      8年前
      2012-9-15 14:19:46

      IE系列有此类问题属于正常现象

  7. 8年前
    2012-9-01 17:33:59

    好神奇啊

  8. 8年前
    2012-9-01 14:20:22

    其实多少蛮不错的

    • Cysime 博主
      8年前
      2012-9-01 15:26:54

      我也觉得~我蛮喜欢这个样式的..

  9. 8年前
    2012-9-01 11:46:16

    哎哟.这个效果可以有..让我萌发了多搞几个样式的想法.

    • Cysime 博主
      8年前
      2012-9-01 15:27:30

      研究吧= =+我们来抄袭= =++

      • 8年前
        2012-9-01 15:32:08

        研究出来再说~ 哈哈

  10. 8年前
    2012-8-31 21:56:42

    这里说下。我去官网大致看了看,你的文章可能要改下。第九行以上和以下应该是两个不同的效果的css。你写到一起啦。

    • Cysime 博主
      8年前
      2012-9-01 15:27:46

      是啊,因为我把这俩效果混合到一起了….

      • 8年前
        2012-9-01 16:05:08

        你没发现两端是一摸一样的吗。就是说第二个已经涵盖了第一个了。所以没必要加前9句代码。重复了

  11. 8年前
    2012-8-31 21:51:59

    虽然圆圆头像最近开始火了。我怕太赶潮流啦~这个头像转动的先拿走看看,看看方块的转动什么感觉~

    • Cysime 博主
      8年前
      2012-9-01 15:28:01

      我觉得方块转动有点别扭…真的…

  12. 8年前
    2012-8-31 21:19:34

    哇塞,这个太牛了!

    • Cysime 博主
      8年前
      2012-8-31 21:20:18

      仅限多说用户~

  13. 8年前
    2012-8-31 21:04:31

    好高端的头像效果

    • Cysime 博主
      8年前
      2012-8-31 21:43:32

      哈哈…都是CSS的玩意儿~可惜我不在行…

  14. 8年前
    2012-8-31 20:56:14

    有没有其他的啦?

    • Cysime 博主
      8年前
      2012-8-31 20:57:33

      总之我没有其它的了

      • 8年前
        2012-8-31 20:57:55

        哪搞的,小正太~

        • Cysime 博主
          8年前
          2012-8-31 21:02:41

          当然是多说官网了……..

  15. 8年前
    2012-8-31 20:56:07

    用了,用了··感觉不错很棒撒··

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇