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\) 节点连 ...