css | js 实现扩展卡片小demo
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的更多相关文章
- js特效 15个小demo
js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...
- js存款计算器原生小demo
大家好,本人是初入前端的一枚程序猿,深知js底层开发的重要性,这也是我的软肋所在(曾经以为),渐渐的明白了一个道理,饭要一口口吃,路要一步步走,这也是我想告诉给所有刚刚进入IT行业的技术员们,沉下心, ...
- 原生JS写了一个小demo,根据输入的数字生成不同背景颜色的小方块儿~
昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- 基于Two.js实现的一个小demo,星球环绕动画效果
下面是核心js code HTML就不贴了,需要引入two.js文件: var elem = document.getElementById('draw-animation'); var two = ...
- 利用css3和js实现旋转木马图片小demo
先看效果图: 上源码 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- js事件学习的小demo
直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...
- js 一些有意思的小Demo
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
随机推荐
- iframe 父框架调用子框架的函数
1.父框架定义: <iframe name="mainframe" id="mainframe" width="100%" scrol ...
- android弱网络优化
1 网络请求,使用更好的网络请求方式 flutter有3种请求方式,flutter自带的io下httpclient请求,使用dart原生的http请求,dio请求. flutter还可以通过调用and ...
- Airport Simulation (数据结构与算法 – 队列 / Queue 的应用)
Airport Simulation 是数据结构与算法教材中用于演示Queue的一个小程序(大多数教师似乎会跳过这个练习).主程序会通过输入总的运行时间.队列里可以等待的最多飞机数量,平均每个时间单元 ...
- 关于Resouces.resx 在WPF中{x:Static}不显示内容只显示字段的问题解决办法
问题现象:<object property="{x:Static prefix:typeName.staticMemberName}" .../> 界面中只显示资源引用 ...
- java-方法。(新手)
import java.util.ArrayList; //导入包.import java.util.Iterator;import java.util.LinkedList;import java. ...
- System.Text.Json 序列化对所有 JSON 属性名称使用 camel 大小写
asp.net core3.x 新增的序列号接口System.Text.Json 序列化时,如果要对所有 JSON 属性名称使用 camel 大小写 将 JsonSerializerOptions.P ...
- Mysql常用sql语句(一)- 操作数据库
21篇测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html ...
- Android应用开发基本流程
Android应用开发流程 应用规划及架构设计 开发应用程序的步骤 项目有哪些功能. 需要哪些必要的界面及界面之间跳转的流程. 需要的数据及其数据的来源和格式. 是否需要服务器端的支持. 是否需要本地 ...
- P1969 积木大赛 题解
原题链接 简要题意: 每次把一段区间 \(+1\),问得到 \(a\) 数组的最小次数. 我们可以把 \(+1\) 得到 \(a\) 换成,从 \(a\) 依次 \(-1\) 得到 \(0\). 算法 ...
- 题解 CF1304E 【1-Trees and Queries】
前言 这场比赛,在最后 \(5\) 分钟,我想到了这道题的 \(Idea\),但是,没有打完,比赛就结束了. 正文 题目意思 这道题目的意思就是说,一棵树上每次给 \(x\) 和 \(y\) 节点连 ...