头像效果.scss

/*
    DOM结构说明:
        ul.avatar-list
            li
                img.avatar
            li 
                img.avatar
*/
.avatar-list > li:nth-child(3n+2) img {
    border-top-left-radius: 84%;
    border-top-right-radius: 94%;
    border-bottom-left-radius: 72%;
    border-bottom-right-radius: 83%;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    &:hover {
        border-top-left-radius: 69%;
        border-top-right-radius: 64%;
        border-bottom-left-radius: 70%;
        border-bottom-right-radius: 53%;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.avatar-list li img,
.avatar-list li:nth-child(2n+1) img {
    border-top-left-radius: 59%;
    border-top-right-radius: 52%;
    border-bottom-left-radius: 59%;
    border-bottom-right-radius: 56%;
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    transform: rotate(-6deg);
    &:hover {
        border-top-left-radius: 51%;
        border-top-right-radius: 67%;
        border-bottom-left-radius: 64%;
        border-bottom-right-radius: 56%;
        cursor: pointer;
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
}

.avatar {
    border-radius: 50%;
    border: 3px solid red;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}