网站的头像加个鼠标划过旋转

2

刚刚换了新主题,总感觉头像的位置差了点什么,想了想还是加个鼠标放上去旋转的CSS吧。然后找了一圈,知道网上有,但是不知道哪个好,最后扒了一个,用上了挺好的。

代码就放着,做个笔记吧,方便以后用。

开箱即用,特别方便!

/*头像旋转*/
#profile-image img {
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    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;
}

#profile-image img: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);
}

/*头像旋转*/