Expanding Cards

最新推荐文章于 2024-08-24 15:01:06 发布

BEER_7

最新推荐文章于 2024-08-24 15:01:06 发布

阅读量133

点赞数

分类专栏： 50个前端练手小项目文章标签： css css3 html

本文链接：https://blog.csdn.net/Im_print/article/details/126335045

版权

50个前端练手小项目专栏收录该内容

50 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- META元素通常用于指定网页的描述，也就是元数据 -->
    <!-- 字符集声明，告诉文档使用哪种字符编码 -->
    <meta charset="UTF-8" />
    <!-- name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值 -->
    <!-- viewport 为viewport（视口）的初始大小提供指示 -->
    <!-- width 定义 viewport 的宽度，device-width即为设备屏幕分辨率的宽度值-->
    <!-- initial-scale 定义设备宽度（宽度和高度中更小的那个：如果是纵向屏幕，就是 device-width，如果是横向屏幕，就是 device-height）与 viewport 大小之间的缩放比例。 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- rel(relationship)是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用 -->
    <link rel="stylesheet" href="style.css" />
    <!-- title 元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 -->
    <title>Expanding Cards</title>
  </head>
  <body>
    <!-- div 元素是一个通用型的内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响 -->
    <!-- 使用class定义容器名称，便于针对性地修改内容的格式 -->
    <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>

/* 用于从其他样式表导入样式规则。 */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

/* * 选择器选择所有元素 */
* {
  /* box-sizing 属性定义了如何计算一个元素的总宽度和总高度 */
  /* border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。 */
  box-sizing: border-box;
}

body {
  /* font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体 */
  /* 最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用 */
  font-family: 'Muli', sans-serif;
  /* display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。 */
  /* flex 弹性容器 */
  display: flex;
  /* align-items 属性定义flex子项的对齐方式 */
  /* 元素位于容器的中心 */
  align-items: center;
  /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 */
  /* 居中排列 */
  justify-content: center;
  /* vh： 视窗高度的百分比（ 1vh 代表视窗的高度为 1%） */
  height: 100vh;
  /*  overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么 */
  /* 隐藏 */
  overflow: hidden;
  margin: 0;
}

.container {
  /* 初始值为：元素排列为一行 */
  display: flex;
  width: 90vw;
}

.panel {
  /* 设置背景图片大小 */
  /* cover 该背景图以它的全部宽或者高覆盖所在容器，当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪 */
  background-size: cover;
  /* 为每一个背景图片设置初始位置 */
  background-position: center;
  /* 定义背景图像的重复方式 */
  background-repeat: no-repeat;
  height: 80vh;
  /* 外边框圆角 */
  border-radius: 50px;
  color: #fff;
  /* 在鼠标指针悬停在元素上时显示相应样式 */
  /* pointer 悬浮于连接上时，通常为手 */
  cursor: pointer;
  /* 设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间 （占比）*/
  flex: 0.5;
  margin: 10px;
  /* 相对定位元素 */
  position: relative;
  -webkit-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;
}

/* @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的 */
/* max-width 定义输出设备中的页面最大可见区域宽度 */
@media (max-width: 480px) {
  .container {
    width: 100vw;
  }

  /* nth-of-type 用于选择特定类型的子元素 */
  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
    display: none;
  }
}

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        // 给点击的图片单独加active
        panel.classList.add('active')
    })
})

// 移除所有的active
function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}