gulp-demo/src/css/index/index.less

/**
* 用户头像
**/
.userProfile{
    display: flex;
    align-items: center;
    height: 100px;
    width: 300px;
    font-size: 2.0833em;
    line-height: 1.3;
    .head{
        width: 100px;
        height: 100%;
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .avatar{
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 50%;
            overflow: hidden;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            transition: transform .6s linear, left .6s linear;
        }
        &:hover .avatar{
            transform: rotate(-360deg);
            left: -105%;
        }
    }
    .text{
        flex: 1;
        width: 0;
        margin-left: 10px;
        .userName{
            font-size: 1em;
        }
        .userDesc{
            margin-top: 4px;
            font-size: .7em;
        }
    }
}

/**
* 用户头像End
**/
.mb{
    margin-bottom: 20px;
}
header{
    position: sticky;
    top: 0;
    z-index: 999;
    font-size: 1.333em;
    background-color: #fffef870;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-bottom: 15px;
    padding: 0 30px;
    height: 35px;
    line-height: 35px;
    .item{
        cursor: pointer;
        padding: 0 10px;
        &:hover{
            background-color: #fffef870;
        } 
    }
    .menulist{
        li{
            float: left;
        }
    }
    .oplist{
        li{
            float: right;
        }
    }
}

.panel{
    // background-color: #fffef870;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    position: relative;
    h1{
        font-size: 2.9116em;
    }
    .author{
        font-size: 1.0833em;
    }
    .content{
        text-align: left;
        font-size: 1.6667em;
        margin-top: 15px;
        line-height: 1.2;
        word-break: break-all;
    }
    .float{
        cursor: pointer;
        font-size: 1.1667em;
        position: absolute;
        right: 100%;
        top: 200px;
        background-color: #fffef870;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        width: 45px;
        word-break: break-all;
        padding: 4px 6px;
        &:hover{
            animation: bounce .4s;
        }
    }
}

@keyframes bounce {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}

.line{
    height: 15px;
    width: 200px;
    margin: 0 auto;
    cursor: pointer;
    &:hover{
        height: 15px;
        &::after{
            height: 15px;
        }
    }
    &::after{
        content: "";
        height: 5px;
        display: block;
        border-radius: 6px;
        background-color: #fffef870;
        transition: height .4s ease;
    }
}