css 鼠标经过图片缓慢切换图片、鼠标离开缓慢还原

https://blog.csdn.net/qq_26780317/article/details/80486766

一.控制背景图片在一个圆形div内切换

.header .logo {
    width: 54px;
    height: 54px;
    margin:23px ;
    text-align: center;
    border-radius: 54px;
    background: url("/static/images/icon/logo.png");
    border: #e38d13 solid;

    transition: all .6s;

}

    /* logo 水平反转 */
.header .logo:hover {
    background-position: -54px ;

}

二.控制div中的div上下切换

#user-operate .btn{
    margin-top: 0px;
    margin-left: -5px;
    transition: all .6s;
}

#user-operate .btn:hover {
  margin-top: -25px;
}