HTML、CSS实现手风琴效果

最新推荐文章于 2025-03-18 09:48:08 发布

GT-一二

最新推荐文章于 2025-03-18 09:48:08 发布

阅读量1k

点赞数 3

分类专栏： CSS基础文章标签： HTML CSS flex布局手风琴效果交互设计

本文链接：https://blog.csdn.net/AAAAA1235555/article/details/127481942

版权

CSS基础专栏收录该内容

24 篇文章

订阅专栏

HTML、CSS实现手风琴效果

1 展示
2代码
- 2.1 HTML
- 2.2 CSS
3解释

1 展示

在这里插入图片描述
点击前往在线展示

2代码

2.1 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="shell">
        <div>
            <span>one</span>
        </div>
        <div>
            <span>two</span>
        </div>
        <div>
            <span>three</span>
        </div>
        <div>
            <span>four</span>
        </div>
        <div>
            <span>five</span>
        </div>
    </div>
</body>
</html>

2.2 CSS

*{
    margin: 0;
    padding: 0;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color:rgb(243,230,241);
}
.shell{
    width: 90%;
    height: 700px;
    display: flex;
}

.shell div{
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 20px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
    border-radius: 20px;
    border: 10px solid #fff;
    background-color: #fff;
}

.shell div:hover{
    flex-basis: 40%;
}

.shell div span{
    font:200 45px '';
    text-align: center;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}