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. SpringBoot入门系列（七）Spring Boot整合Redis缓存

    前面介绍了Spring Boot 中的整合Mybatis并实现增删改查,.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/ ...

  2. C++ 【静态成员】static修饰的成员

    首先,我们先通过字面意思来理解... 成员:成员变量.成员函数. static  修饰成员变量,还有修饰成员函数. static  声明为静态的,称为静态成员.不管这个类创建了多少个对象,静态成员只有 ...

  3. npm和yarn使用

    npm和yarn使用 他们都属于js包管理工具,都可以安装包或者模块yarn 是由facebook.google等联合开发推出的 区别: npm 下载包的话 比如npm install,它是按照包的排 ...

  4. [BJDCTF 2nd]old-hack

    进入首页: 首页告诉了我们是thinkphp5的漏洞. 知道了是哪个版本的话就搜一搜喽:最后发现是thinkphp5.0.23的命令执行 payload_1:查看根目录文件,发现flag位置 http ...

  5. Windows下利用Chrome调试IOS设备页面

    本文介绍如何在 Windows 系统中连接 iOS设备 并对 Web 页面进行真机调试 必须前提 iOS设备.数据线 Node.js 环境 Chrome 浏览器 环境准备 安装Node环境 参考Nod ...

  6. 安装RationalRose的问题解决

    列出大问题:在这一步无法进行下一步,直接就只能退出. 翻译过来的意思是:IBM安装程序被完全下载之前就终止了,大概是这个意思. 然后我就直接进了IBM的官网看了一下产品支持,上面解释说是组件clear ...

  7. SSI服务器端包含注入

    服务器端嵌入:Server Side Include,是一种类似于ASP的基于服务器的网页制作技术.大多数(尤其是基于Unix平台)的WEB服务器如Netscape Enterprise Server ...

  8. Building Applications with Force.com and VisualForce (DEV401) 中用到的Recruiting Application介绍

    1.Who uses Recruiting Application. 2. Recruiting Application Object Model

  9. Redis数据结构——quicklist

    之前的文章我们曾总结到了Redis数据结构--链表和Redis数据结构--压缩列表这两种数据结构,他们是Redis List(列表)对象的底层实现方式.但是考虑到链表的附加空间相对太高,prev 和 ...

  10. EF多租户实例：快速实现分库分表

    前言 来到这篇随笔,我们继续演示如何实现EF多租户. 今天主要是演示多租户下的变形,为下图所示 实施 项目结构 这次我们的示例项目进行了精简,仅有一个API项目,直接包含所有代码. 其中Control ...