1.代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
} body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
width: 90vw;
}
.panle {
background-size: auto, 100%;
background-position: center;
background-repeat: no-repeat;
border-radius: 50px;
color: #fff;
flex: 0.5;
cursor: pointer;
height: 80vh;
position: relative;
margin: 10px;
transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9);
}
.panle h3 {
font-size: 24px;
opacity: 0;
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
transition: opacity 0s ease-in 0s;
}
.panle.active {
flex: 5;
}
.panle.active h3 {
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
@media (max-width: 500px) {
.container {
width: 100vw;
}
.panle:nth-of-type(4) {
display: none;
}
.panle:nth-of-type(5) {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="panle" style="background-image: url(./img/img1.jpg);">
<h3>海阔天空</h3>
</div>
<div class="panle" style="background-image: url(./img/img2.jpg);">
<h3>蓝天白云</h3>
</div>
<div class="panle" style="background-image: url(./img/img3.jpg);">
<h3>山川湖海</h3>
</div>
<div class="panle" style="background-image: url(./img/img4.jpg);">
<h3>星空灿烂</h3>
</div>
<div class="panle" style="background-image: url(./img/img5.jpg);">
<h3>绿树成荫</h3>
</div>
</div> <script>
const penles = document.querySelectorAll(".panle");
penles.forEach((panle) => {
panle.addEventListener("click", () => {
removeClass();
panle.classList.add("active");
});
function removeClass() {
penles.forEach((penle) => {
penle.classList.remove("active");
});
}
});
</script>
</body>
</html>

2.效果展示



3.使用资源图片如下







-------------完成!!!!!!!

css | js 实现扩展卡片小demo的更多相关文章

  1. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  2. js存款计算器原生小demo

    大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...

  3. 原生JS写了一个小demo,根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  4. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  5. 基于Two.js实现的一个小demo,星球环绕动画效果

    下面是核心js code HTML就不贴了,需要引入two.js文件: var elem = document.getElementById('draw-animation'); var two = ...

  6. 利用css3和js实现旋转木马图片小demo

    先看效果图: 上源码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. js事件学习的小demo

    直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  8. js 一些有意思的小Demo

  9. 区域及分离、Js压缩、css、jquery扩展

    后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...

随机推荐

  1. iframe 父框架调用子框架的函数

    1.父框架定义: <iframe name="mainframe" id="mainframe" width="100%" scrol ...

  2. android弱网络优化

    1 网络请求,使用更好的网络请求方式 flutter有3种请求方式,flutter自带的io下httpclient请求,使用dart原生的http请求,dio请求. flutter还可以通过调用and ...

  3. Airport Simulation (数据结构与算法 – 队列 / Queue 的应用)

    Airport Simulation 是数据结构与算法教材中用于演示Queue的一个小程序(大多数教师似乎会跳过这个练习).主程序会通过输入总的运行时间.队列里可以等待的最多飞机数量,平均每个时间单元 ...

  4. 关于Resouces.resx 在WPF中{x:Static}不显示内容只显示字段的问题解决办法

    问题现象:<object property="{x:Static prefix:typeName.staticMemberName}" .../> 界面中只显示资源引用 ...

  5. java-方法。(新手)

    import java.util.ArrayList; //导入包.import java.util.Iterator;import java.util.LinkedList;import java. ...

  6. System.Text.Json 序列化对所有 JSON 属性名称使用 camel 大小写

    asp.net core3.x 新增的序列号接口System.Text.Json 序列化时,如果要对所有 JSON 属性名称使用 camel 大小写 将 JsonSerializerOptions.P ...

  7. Mysql常用sql语句(一)- 操作数据库

    21篇测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html ...

  8. Android应用开发基本流程

    Android应用开发流程 应用规划及架构设计 开发应用程序的步骤 项目有哪些功能. 需要哪些必要的界面及界面之间跳转的流程. 需要的数据及其数据的来源和格式. 是否需要服务器端的支持. 是否需要本地 ...

  9. P1969 积木大赛 题解

    原题链接 简要题意: 每次把一段区间 \(+1\),问得到 \(a\) 数组的最小次数. 我们可以把 \(+1\) 得到 \(a\) 换成,从 \(a\) 依次 \(-1\) 得到 \(0\). 算法 ...

  10. 题解 CF1304E 【1-Trees and Queries】

    前言 这场比赛,在最后 \(5\) 分钟,我想到了这道题的 \(Idea\),但是,没有打完,比赛就结束了. 正文 题目意思 这道题目的意思就是说,一棵树上每次给 \(x\) 和 \(y\) 节点连 ...