Expanding Cards

<!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()// 给点击的图片单独加activepanel.classList.add('active')})
})// 移除所有的active
function removeActiveClasses() {panels.forEach(panel => {panel.classList.remove('active')})
}

Expanding Cards相关推荐

50 Projects 50 Days - Expanding Cards 学习记录
50 Projects 50 Days不使用任何前端框架,适合初学者练手,巩固前端基础,在这里记录一下学习过程,尤其是一些细节上的问题. 项目地址 Expanding Cards 展示效果 Expan ...
50天用JavaScript完成50个web项目，我学到了什么?
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群所有示例源码地址:https://github.com/eveningwater/my-web-projects/tree/ ...
hdu 4876 ZCC loves cards(暴力)
题目链接:hdu 4876 ZCC loves cards 题目大意:给出n,k,l,表示有n张牌,每张牌有值.选取当中k张排列成圈,然后在该圈上进行游戏,每次选取m(1≤m≤k)张连续的牌,取牌上值 ...
J - Invitation Cards POJ - 1511
J - Invitation Cards POJ - 1511 题意: 共有 n 个站点,n 个志愿者从1 出发,分别到达不同的站点,晚上全部回到 1 ,求他们总的最小花费是多少? 思路: 首先想到从 ...
A - Expanding Rods POJ - 1905（二分）
A - Expanding Rods POJ - 1905(二分) 题目 Problem Description When a thin rod of length L is heated n deg ...
Codeforces Gym 100418K Cards 暴力打表
Cards Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.action ...
[HNOI2008]Cards
1004: [HNOI2008]Cards Time Limit: 10 Sec Memory Limit: 162 MB [Submit][Status][Discuss] Description ...
[.NET开发] C#编程调用Cards.dll实现图形化发牌功能示例
本文实例讲述了C#编程调用Cards.dll实现图形化发牌功能.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; usi ...
ARC-060C - Tak and Cards - 动态规划
题目描述 Tak has N cards. On the i-th (1≤i≤N) card is written an integer xi. He is selecting one or more ...

Expanding Cards

Expanding Cards相关推荐

最新文章

热门文章