day01-Expanding Cards（扩展卡_手风琴）

格式化小拓

已于 2023-07-16 20:55:34 修改

阅读量68

点赞数

分类专栏： 50天50个小demo前端文章标签： css 前端 html5 javascript

于 2023-06-28 21:00:34 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131444716

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day01-Expanding Cards（扩展卡_手风琴）

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expanding Cards</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="panel active"
            style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
            <h3>Explore The World-探索世界</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
            <h3>Wild Forest-野生森林</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');">
            <h3>Sunny Beach-阳光明媚的海滩</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80');">
            <h3>City on Winter-冬天的城市</h3>
        </div>
        <div class="panel"
            style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');">
            <h3>Mountains - Clouds-山-云</h3>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
/* 用于导入谷歌字体库中的"Muli" 字体，并将其应用于网页的文本内容。通过使用这行代码，您可以在网页中使用"Muli" 字体来呈现文本。 */

* {
    box-sizing: border-box;
    /* 当设置 box-sizing: border-box;时，元素的宽度和高度将包括内容区域、内边距和边框的总和。换句话说，边框和内边距不会增加元素的宽度和高度，而是会从内容区域中减去。 */
}

body {
    font-family: "Muli", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* 元素的高度将填满整个视口高度。无论视口的实际高度是多少，元素都将占据整个可见区域的高度。 */
    overflow: hidden;
    /* 设置 overflow: hidden; 时，溢出的内容将被隐藏，同时不会显示滚动条。换句话说，超出元素边界的内容将被裁剪并隐藏起来，不可见。 */
    margin: 0;
}

.container {
    display: flex;
    width: 90vw;
    /* 当设置 width: 90vw;时，元素的宽度将是视口宽度的 90%。无论视口的实际宽度是多少，元素都将占据视口宽度的 90%。 */
}

.panel {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    /* 设置 flex: 0.5;时，表示该元素的弹性因子为0.5。弹性因子决定了在分配剩余空间时，子元素所占据的比例。如果所有子元素的弹性因子都为0.5，则它们会平均分配剩余空间。 */
    margin: 10px;
    position: relative;
    transition: all 700ms ease-in;
    /* 用于在元素状态发生变化时，为其属性添加平滑的动画过渡效果 */
}

.panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
}

/* 点击后需要添加的类 */
.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
    /* 设置元素的过渡效果，使其在 0.3 秒内从不透明度为 0 的状态过渡到完全不透明（不透明度为 1）。ease-in 指定了动画速度曲线，使其开始时缓慢加速。0.4s 是过渡效果的延迟时间，即在触发过渡效果后的 0.4 秒后开始执行过渡。 */
}

@media (max-width: 480px) {
    .container {
        width: 100vw;
    }

    .panel:nth-of-type(4),
    .panel:nth-of-type(5) {
        display: none;
    }

    /* 当视口宽度小于或等于 480 像素时，容器元素 .container 将占据整个视口宽度，而第四个和第五个面板元素将被隐藏。这样可以根据设备屏幕的尺寸进行布局调整和内容隐藏，以提供更好的响应式体验。 */
}

script.js

let panels = document.querySelectorAll(".panel");
panels.forEach(panel => {
    panel.addEventListener('click', () => {
        // 先清除所有的active，再给当前的添加active
        panels.forEach(item => {
            item.classList.remove('active');
        })
        // 当前的panel
        panel.classList.add('active');
        // 注意：此处的动态效果是通过transition: all 700ms ease-in;flex: 5;配合形成的。
    })
})

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
day01-Expanding Cards（扩展卡_手风琴）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday01-Expanding Cards（扩展卡_手风琴）index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录