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. Pyppeteer入门（转载）

    一.简介 Puppeteer 是 Google 基于 Node.js 开发的一个工具,有了它我们可以通过 JavaScript 来控制 Chrome 浏览器的一些操作,当然也可以用作网络爬虫上,其 A ...

  2. vue 阻止冒泡 @click.stop=

    vue 阻止冒泡 @click.stop= vue中处理冒泡标准姿势 事件修饰符 Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的.这些事件修饰符主要有以下几个: st ...

  3. MVVM相关框架

    Caliburn.Micro PropertyChanged.Fody Prism MVVMLight (未完)

  4. 042.集群网络-flannel及calico

    一 Flannel组件 1.1 flannel介绍 Kubernetes的网络模型假定了所有Pod都在一个可以直接连通的扁平网络空间中.若需要实现这个网络假设,需要实现不同节点上的Docker容器之间 ...

  5. Android 登陆功能的实现（访问WebServices 解析返回的JSON结果）

    1. WebServices返回的JSON结果 { , "Result": [{ ", ", ", " }] } 2.访问WEB服务代码 i ...

  6. Dapper解析嵌套的多层实体类

    在作项目的时候,我会将一些不涉及查询的字段,形成JSON统一存放在一个字段中,向下面这样的来建实体类, public class WechatModel { public string wechati ...

  7. 5分钟配置好你的AI开发环境

    作者 | Revolver 无论是第一次设置TensorFlow的新手数据科学爱好者,还是使用TB级数据的经验丰富的AI工程师,安装库.软件包或者框架总是一个困难又繁琐的过程.但是像Docker这样的 ...

  8. 震惊！程序员的福音！不需要敲代码就能完成复杂的逻辑应用？ —— Azure Logic App

    (大家看完标题可能以为是营销号,哈哈哈哈哈哈哈哈哈...客官请留步, 正经博主....好吧) 今天我们的主题是Azure Logic Apps Azure Logic Apps 是什么? 官方解释:h ...

  9. HDU - 1166 树状数组模板（线段树也写了一遍）

    题意: 汉语题就不说题意了,用到单点修改和区间查询(树状数组和线段树都可以) 思路: 树状数组的单点查询,单点修改和区间查询. 树状数组是巧妙运用二进制的规律建树,建树就相当于单点修改.这里面用到一个 ...

  10. coding++：MD5加密（JAVA加密 与 JS加密不一致问题）

    要求:根据指定 字符加密   JS中的加密方法 要和 JAVA中的算法保持一致,解决如下: var rotateLeft = function (lValue, iShiftBits) { retur ...