订阅汇聚素材网Feed

动画头像 多说评论

多说自定义CSS 让你的多说评论动感起来

多说自定义头像CSS

实现圆角头像,鼠标移上时旋转的效果,加入以下样式即可实现:

  
    #ds-reset .ds-avatar img{   
        width:54px;height:54px; /*设置图像的长和宽,这里要根据自己的评论框情况更改*/  
        border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/  
        -webkit-border-radius: 27px;/*圆角效果:这里只要radius设置图片宽度的一半大小,兼容webkit浏览器*/  
        -moz-border-radius:27px;   
        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-reset .ds-avatar img:hover{/*设置鼠标悬浮在头像时的CSS样式*/  
        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);/*图像旋转360度*/  
        -webkit-transform: rotateZ(360deg);   
        -moz-transform: rotateZ(360deg);   
    }  

6 人Likes
  

文章转载请注明:动画头像 多说评论-汇聚素材网

本文固定链接:http://www.webhj.com/hj-1641.html  +复制链接

动画头像 多说评论:等您坐沙发呢!

发表评论

*

*

4 + 5

快捷键:Ctrl+Enter
0全站搜索 1 设计 2 素材 3 教材 4 WEB 5 电子书籍