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. css中：link和@import的区别

    两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...

  2. 干货来啦。Flask框架看这一篇就够了,关注不迷路，Jeff带你看源码。开发技术时时更新

    目录 一.初识Flask 1.1 什么是flask? 1.2 为什么要有flask? 二.Flask快速启动 三.Flask四剑客 三.flask的配置文件 可以配置的属性 四.flask路由 4.1 ...

  3. 【转】深入 ProtoBuf - 简介

    之前在网络通信和通用数据交换等应用场景中经常使用的技术是 JSON 或 XML,而在最近的开发中接触到了 Google 的 ProtoBuf. 在查阅相关资料学习 ProtoBuf 以及研读其源码之后 ...

  4. JSP+Servlet+JDBC+Mysql实现的天才会议管理系统

    本文存在视频版本,请知悉 项目简介 项目来源于:https://github.com/hegexunmeng/meeting-system 这次分享一个会议管理系统,前端后端几乎没有使用任何框架,适合 ...

  5. NeurIPS 2019 Spotlight | Cascade RPN，结构的艺术带来极致的提升

    论文提出Cascade RPN算法来提升RPN模块的性能,该算法重点解决了RPN在迭代时anchor和feature不对齐的问题,论文创新点足,效果也很惊艳,相对于原始的RPN提升13.4%AR 论文 ...

  6. 手机抓包HTTPS (Fiddler & Packet Capture)

    手机抓包HTTPS (Fiddler & Packet Capture) 以前写了一个小游戏(消灭病毒)的刷金币小脚本,使用需要获取openid ,就需要抓微信的HTTPS包 一直都是用Fid ...

  7. mysql存储过程简单用法

    show procedure status 查看所有存储过程 <!--  简单存储过程  --> 先将结束符改成// delimiter // create procedure query ...

  8. JavaScript FormData对象，FileReader对象，files属性

    一.ajax与FormData的使用 最近在使用ajax朝后端提交数据时,如果提交的数据都是普通键值对还好说,直接使用ajax默认的格式向后端提交即可. $('#d1').click(function ...

  9. SqlBulkCopy批量插入数据 显示 来自数据源的 String 类型的给定值不能转换为指定目标列的类型 smalldatetime。错误

    因为需要大量插入数据,linq ef无法达到速度的要求,因此把模型转换成SQL ,使用SqlBulkCopy快速插入.但是去提示 来自数据源的 String 类型的给定值不能转换为指定目标列的类型 s ...

  10. 使用 xposed 突破饿了么 ssl pining

    作为一个对各种黑科技充满好奇心的前端工程师,这一次盯上了现在的外卖大佬-饿了么.这篇文章记录了抓包饿了么过程中碰到的问题,以及解决方案,希望能够大家带来一点收获. 工具 夜神模拟器 + charles ...