* {
    margin: 0;
    padding: 0;
    /* 简写属性在一个声明中设置所有的列表属性 */
    list-style: none;
    font-size: 20px;
    /* color: #f4f1de; */
}

.daohang {
    padding-top: 30px;
    width: 100%;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* background-image:linear-gradient(to right, #a18cd1, #fbc2eb); */
    background-color: #50536e;
    color: #f4f1de;
}
.shell{
    
    display: flex;
    justify-content: center;
}
.button,.portrait{
    background-color: #50536e;
    width: 170px;
    height: 65px;
    text-align: center;
    /* 行高 */
    line-height: 65px;
    /* 过渡时长 */
    transition: .3s;
    cursor: pointer;
}
.portrait::before{
    content: '';
    /* 将此元素改成块级元素 */
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(30px,-30px);
    background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/784258/galleries/2278382/t_230223030305_QQ%E5%9B%BE%E7%89%8720230223110243.jpg);
    background-size: cover;
    border: 10px solid #fff;
}
.information{
    width: 220px;
    background-color: #e07a5f;
    transform: translate(-20px,-200px);
    border-radius: 10px;
    padding: 20px 0;
    line-height: 0;
    height: 0;
    transition: .3s;
    opacity: 0;
    
}
.button:hover{
    background-color: #d15a39;
}
.button li:hover{
    background-color: #ffb29d;
}
.button ul li{
    height: 0;
    transition: .2s;
    opacity: 0;
    transform: translateY(-65px);
    background-color: #e07a5f;
}
.button:hover li{
    height: 65px;
    opacity: 1;
    transform: translateY(0);
}
.portrait:hover .information{
    opacity: 1;
    line-height: 65px;
    transform: translate(-20px,-10px);
    height: auto;
}