发布于 由Cysime

好看的多说自定义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. }

“好看的多说自定义CSS分享”的30个回复

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

    回复

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

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.