手风琴-原神 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="new_file.css">
    </head>
    <body>
        <div class="accordion">
            <div class="role">
                <img src="https://uploadstatic.mihoyo.com/contentweb/20210720/2021072011090118454.png" >
                <p>绫华</p>
            </div>
            <div class="role">
                <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/037d6fa79d3066c5bc8711187ad2f673_9069084469193280544.png" >
                <p>绫人</p>
            </div>
            <div class="role">
                <img src="https://uploadstatic.mihoyo.com/contentweb/20220208/2022020814003845991.png" >
                <p>神子</p>
            </div>
            <div class="role">
                <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/07/04/44e2d916d9c13bca863d56423004fd98_5259521148631074871.png" >
                <p>万叶</p>
            </div>
            <div class="role">
                <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/593e6a6d5d8836ca2ab5c27a98593e58_7195951238560837785.png" >
                <p>宵宫</p>
            </div>
            <div class="role">
                <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/8ca5953fb331d71bc880496f5e8b7745_6228630778438562406.png" >
                <p>心海</p>
            </div>
            <div class="role">
                <img src="https://uploadstatic.mihoyo.com/contentweb/20211130/2021113011275854973.png" >
                <p>一斗</p>
            </div>
            <div class="role">
                <img src="https://webstatic.mihoyo.com/upload/contentweb/2022/06/30/fdcbc9ef8859b7077d92ae38d925e15e_7767077963502328666.png" >
                <p>影</p>
            </div>
        </div>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background-color: mediumpurple;
    display: flex;
    justify-content: center;
    align-items: center;
}
.accordion{
    width: 80%;
    height: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.role{
    flex: 1;
    background-color: white;
    overflow: hidden;
    box-shadow: 1px 1px 20px 0px;
    margin: 10px;
    transition: all 0.5s;
}
.role img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: inline-block;
}
p{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.role:hover{
    flex: 8;
}
posted @ 2023-04-17 20:57  不尽人意的K  阅读(74)  评论(0)  编辑  收藏  举报