首页 > 代码修改 > 多说留言板头像180度旋转的css代码
2012
10-30

多说留言板头像180度旋转的css代码

今天网友唯安请我给扒了别人一个多说用于留言板的代码,需要的朋友可以自己拿,效果如下:

多说留言板头像180度旋转的css代码 - 第1张  | 心岛博客

代码如下:

#ds-thread #ds-reset .ds-comments-info {
}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current {
    background: none repeat scroll 0 0 #DDDFC2;
    border: 0 none;
    color: #848568;
    text-shadow: none;
}
#ds-thread #ds-reset .ds-highlight {
    color: #848568 !important;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
}
#ds-thread #ds-reset ul.ds-comments-tabs li.ds-tab a.ds-current:hover {
    background: none repeat scroll 0 0 #D4D6BA;
    color: #696A52;
}
#ds-thread #ds-reset a.ds-highlight:hover {
    color: #696A52 !important;
}
#ds-thread {
    padding-left: 30px;
}
#ds-thread #ds-reset li.ds-post, #ds-thread #ds-reset .ds-post-self {
    border: 0 none !important;
}
#ds-reset .ds-avatar, #ds-thread #ds-reset ul.ds-children .ds-avatar {
    background: url("https://x.libdd.com/farm1/2cff64/2306e2d4/bg.jpg") repeat scroll 0 0 transparent;
    border-radius: 46px 46px 46px 46px;
    box-shadow: -1px 0 1px rgba(0, 0, 0, 0.15) inset;
    height: 36px;
    left: -20px;
    padding: 5px;
    top: 15px;
    width: 36px;
}
#ds-thread .ds-avatar a {
    background-color: #FFFFFF !important;
    border: 1px solid #B9BAA6;
    border-radius: 34px 34px 34px 34px;
    display: inline-block;
    height: 32px;
    padding: 1px;
    width: 32px;
}
#ds-thread .ds-avatar a:hover {
    border-color: #DE5A4E;
}
#ds-thread .ds-avatar > img {
    margin: 2px 0 0 2px;
}
#ds-reset .ds-avatar img {
    border-radius: 32px 32px 32px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    height: 32px;
    transition: all 0.4s ease-in-out 0s;
    width: 32px;
}
.ds-post-main:hover .ds-avatar img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
#ds-reset .ds-avatar img{
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-thread #ds-reset .ds-comment-body {
    background: none repeat scroll 0 0 #F0F0E3;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
    padding: 15px 15px 15px 47px;
}
#ds-thread #ds-reset ul.ds-children .ds-comment-body {
    padding-left: 15px;
}
#ds-thread #ds-reset .ds-comment-body p {
    color: #787968;
}
#ds-thread #ds-reset .ds-comments a.ds-user-name {
    color: #696A52 !important;
    font-weight: bold;
}
#ds-thread #ds-reset .ds-comments a.ds-user-name:hover {
    color: #DD3322 !important;
}

注意:以上效果对于IE9.0以下的浏览器是不兼容的,因为他们不支持css3的属性,不过只是头像旋转和圆角特效失效而已!

有些浏览器可能不会支持,所以大家检测下,可以在此反馈!谢谢!

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。