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. Minio 集群扩容存储空间，配合nginx 负载反向代理后端minio 集群服务器，提升高可用性

    环境:Centos  7 软件:minio,Etcd 需求:通过联盟两个集群实例,实现水平扩容存储空间问题: 服务器使用阿里云,一共4台服务器(官方说明最好4台服务器做分布式,测试节省服务器所以我们使 ...

  2. 升级Kubernetes 1.18前，你不得不知的9件事

    本文来自Rancher Labs 昨天Kubernetes最新版本v1.18已经发布,其包含了38项功能增强,其中15项为稳定版功能.11项beta版功能以及12项alpha版功能.在本文中,我们将探 ...

  3. 图-搜索-BFS-DFS-126. 单词接龙 II

    2020-03-19 13:10:35 问题描述: 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出所有从 beginWord 到 endWord 的最短转换序 ...

  4. Falling Squares

    2020-01-08 10:16:37 一.Falling squares 问题描述: 问题求解: 本题其实也是一条经典的区间问题,对于区间问题,往往可以使用map来进行区间的维护操作. class ...

  5. Node/Python 工具搭建cmder和nrm

    一.安装cmder cmder是windows下的一款终端工具,支持很多linux命令,用起来还是很爽的. 1.安装 http://cmder.net/ 直接在官网下载,解压即可. 2.cmder配置 ...

  6. Mybatis在xml配置文件中处理SQL中的大于小于号的方法

    之前在项目中遇到了在SQL中<=不识别的问题,在Navicat中语句正常,在xml中不识别,想起来就记录一下 项目用的是Mybatis,经过网上多次查询,验证,总结方法如下: 一.使用<! ...

  7. 5L-链表导论心法

    链表是比数组稍微复杂一点的数据结构,也是两个非常重要与基本的数据结构.如果说数组是纪律严明排列整齐的「正规军」那么链表就是灵活多变的「地下党」. 关注公众号 MageByte,有你想要的精彩内容. 链 ...

  8. python之装饰器的进阶

    一.带参数的装饰器 (必须会) 针对不同的app的验证,比如:天猫和天猫超市,京东商城和京东超市 def wrapper_out(n): print(n) def wrapper(f): def in ...

  9. OpenCV-Python 理解K近邻 | 五十三

    目标 在本章中,我们将了解k近邻(kNN)算法的原理. 理论 kNN是可用于监督学习的最简单的分类算法之一.这个想法是在特征空间中搜索测试数据的最近邻.我们将用下面的图片来研究它. 在图像中,有两个族 ...

  10. TensorFlow 实战卷积神经网络之 LeNet

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! LeNet 项目简介 1994 年深度学习三巨头之一的 Yan L ...