6

评论框CSS样式修改

部分修改可以在WordPress连接微博专业版插件的评论设置–评论设置–CSS调整中添加,如果比较多建议写在主题的style.css文件中。

1、评论框背景色

1
2
/*添加评论框背景, fff表示白色背景*/
#pinglun-container{background-color:#fff;}

2、评论头像圆角

1
2
3
4
5
6
7
#pinglun-container img.avatar-36 {
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius:18px;
	box-shadow: inset 0 -1px 0 #3333sf;
	-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}

3、评论头像圆角,并且鼠标悬浮时:图像进行360度旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#pinglun-container img.avatar-36 {
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius:18px;
	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;
	-moz-transition: -moz-transform 0.4s ease-out;
}
#pinglun-container img.avatar-36:hover {
	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);
	-webkit-transform: rotateZ(360deg);
	-moz-transform: rotateZ(360deg);
}

如果您设计了优美的评论模板,不要独享,要拿出来分享噢!我愿意高价回收模板并加入到插件中噢~

已有 1 用户参与1
0 : 1
+1已打分
分享到:
已有 6 条评论 腾讯微博
  1. 11

    2016年10月12日 17:57来自QQ 回复
  2. 请问 能不是圆角的头像能360度旋转吗?

    2016年7月15日 16:19来自新浪微博1 回复
  3. [可爱]

    2015年10月29日 17:13来自QQ 回复
  4. 测试一下FB效果

    2015年4月29日 11:51 5 回复
  5. 根据V说的简单改了一个,有一个bug,就是鼠标悬停下摇晃后头像会消失,不会编程我就只能改成这样了[挖鼻屎]
    #pinglun-container img.avatar-36,#pinglun-container img.avatar-36:hover{
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0s;
    -moz-animation-duration: 0s;
    -ms-animation-duration: 0s;
    -o-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    -ms-animation-duration: 0.7s;
    -o-animation-duration: 0.7s;
    animation-duration: 0.7s;
    }

    @-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
    }

    @-moz-keyframes swing {
    20% { -moz-transform: rotate(15deg); }
    40% { -moz-transform: rotate(-10deg); }
    60% { -moz-transform: rotate(5deg); }
    80% { -moz-transform: rotate(-5deg); }
    100% { -moz-transform: rotate(0deg); }
    }

    @-o-keyframes swing {
    20% { -o-transform: rotate(15deg); }
    40% { -o-transform: rotate(-10deg); }
    60% { -o-transform: rotate(5deg); }
    80% { -o-transform: rotate(-5deg); }
    100% { -o-transform: rotate(0deg); }
    }

    @keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
    }

    #pinglun-container img.avatar-36:hover{
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -o-animation-name: swing;
    animation-name: swing;
    }

    2014年10月4日 07:05来自新浪微博6 回复