菜单 搜索
首页 前端知识 【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局

【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局

2024-05-12 00:05:54 前端知识 前端哥 741 221 我要收藏

bootstrap框架系列案例

案例网址
【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691
【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528
【前端】Bootstrap案例：网格系统、鼠标悬浮动画显示、响应式布局https://blog.csdn.net/karshey/article/details/127392879

文章目录

    • 目标
    • 代码
      • 0.html框架
      • 1.样式
        • 1.1 背景和标题：目标客户
        • 1.2 副标题和内容
      • 2.响应式布局
      • 3.副标题和内容的动画
      • 4.手机屏幕时
    • 总体代码
      • html
      • css
    • 参考

目标

有响应式。

电脑全屏：

在这里插入图片描述

  • 鼠标若悬浮则如左红框
  • 否则如右红框
  • 要有动画效果

平板
在这里插入图片描述
手机：
在这里插入图片描述

  • 没有标题
  • 字直接显示
  • 没有图
  • 背景颜色

代码

0.html框架

<!-- 目标客户：网格系统 -->
<div class="target-customer">
   <div class="title">目标客户</div>

   <div class="container-fluid">
       <div class="row">
           <div class="col item">
               <img src="img/target-1.png" alt="">
               <div class="sub-title">电子银行</div>
               <div class="desc">
                   <p>助力五大行、商业银行、城商行、农商行、农信社等</p>
                   <p>手机银行与直销银行APP消费场景升级</p>
               </div>
           </div>
           <div class="col item">
               <img src="img/target-2.png" alt="">
               <div class="sub-title">金服平台</div>
               <div class="desc">
                   <p>助力钱包、小贷、基金、保险、信托、证券等</p>
                   <p>金融服务平台APP 消费场景升级</p>
               </div>
           </div>
           <div class="col item">
               <img src="img/target-3.png" alt="">
               <div class="sub-title">企业福利</div>
               <div class="desc">
                   <p>助力国有、私营、外资、人力资源公司等</p>
                   <p>企业报销与福利系统消费场景升级</p>
               </div>
           </div>
           <div class="col item">
               <img src="img/target-4.png" alt="">
               <div class="sub-title">智能终端</div>
               <div class="desc">
                   <p>助力机器人、汽车中控、电子屏、商用电视等</p>
                   <p>人工智能语音消费场景升级</p>
               </div>
           </div>
       </div>
   </div>
</div>

在这里插入图片描述

1.样式

1.1 背景和标题：目标客户
.target-customer{
    min-height: 265px;
    background-color: var(--bg-target-color);
}

.target-customer .title{
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    color: var(--title-color);
}

在这里插入图片描述

1.2 副标题和内容
/* 副标题和内容 */
.target-customer .row .item {
    /* 想要居中:这里使用弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;

    height: 135px;
    cursor: pointer;
}

.target-customer .sub-title {
    /* 这里要绝对定位:在容器里的父盒子已经是相对定位了 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 居中 */
    transform: translate(-50%, -50%);

    font-size: 24px;
    color: var(--title-color);
}

/*隐藏desc盒子*/
.desc {
    opacity: 0;
}

竟然是这样：图片没有在正中间。
原因：因为有desc的盒子，且把它隐藏了。
在这里插入图片描述
如果没隐藏，就是这样的：

在这里插入图片描述
显然是desc盒子把图片挤过去了。

先把desc删除即可得到我们的目标。方法：让它溢出，然后溢出隐藏。

/* 副标题和内容 */
.target-customer .row .item {
    /* 想要居中:这里使用弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;

    height: 135px;
    cursor: pointer;
    overflow: hidden;
}

.target-customer .sub-title {
    /* 这里要绝对定位:在容器里的父盒子已经是相对定位了 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 居中 */
    transform: translate(-50%, -50%);

    font-size: 24px;
    color: var(--title-color);
}

.target-customer .desc{
    position: absolute;
    top: 132%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 要调整宽度 */
    width: 100%;
    font-size: 16px;
}

效果：
在这里插入图片描述

2.响应式布局

目标：

  • 大屏一行4个，每个都是col-lg-3
  • ipad一行2个，每个都是col-md-6
  • 手机一行1个

把每个item的class变成：

<div class="col-md-6 col-lg-3 item">

3.副标题和内容的动画

目标：鼠标悬浮在副标题上，副标题向上一点，p标签里的内容显示出来（向上）。
注意，让desc居中。

<div class="desc text-center">

css：

.target-customer .sub-title {
    /* 这里要绝对定位:在容器里的父盒子已经是相对定位了 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 居中 */
    transform: translate(-50%, -50%);

    font-size: 24px;
    color: var(--title-color);

    /* 缓缓上升 */
    transition: top 0.6s ease;
}

.target-customer .desc {
    position: absolute;
    top: 132%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 要调整宽度 */
    width: 100%;
    font-size: 16px;
    /* 透明度为0,就看不到了 */
    opacity: 0;

    transition: top 0.6s ease;
}

/* 动画 */
@media (min-width:768px) {
    .target-customer .item:hover .sub-title {
        top: 35%;
    }

    .target-customer .item:hover .desc {
        top: 75%;
        opacity: 1;
    }
}

效果：鼠标放上去就会显示。
在这里插入图片描述

4.手机屏幕时

目标，手机屏幕时：

  • 去除标题
  • 去除图片
  • 直接显示p标签（desc盒子）
  • 副标题字变小
  • 变背景色

去除标题：

<!-- d-none d-md-block表示默认不显示,ipad屏幕及以上显示 -->
<div class="title text-center d-none d-md-block">目标客户</div>

去掉图片：

<img class="d-none d-md-block" src="img/target-1.png" alt="">

另外三个要求：

/* 手机屏幕时 */
@media (max-width:768px) {
    .target-customer .sub-title{
        top: 40%;
        font-size: 16px;
    }

    .target-customer .desc {
        top: 75%;
        opacity: 1;
        font-size: 14px;
    }

    /* 奇数 */
    .target-customer .item:nth-child(odd){
        background-color: white;
    }
    /* 偶数 */
    .target-customer .item:nth-child(even){
        background-color: var(--bg-target-color);
    }
}

效果：
在这里插入图片描述

总体代码

html

<!-- 目标客户：网格系统 -->
<div class="target-customer">
    <!-- d-none d-md-block表示默认不显示,ipad屏幕及以上显示 -->
    <div class="title text-center d-none d-md-block">目标客户</div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-lg-3 item">
                <img class="d-none d-md-block" src="img/target-1.png" alt="">
                <div class="sub-title">电子银行</div>
                <div class="desc text-center">
                    <p>助力五大行、商业银行、城商行、农商行、农信社等</p>
                    <p>手机银行与直销银行APP消费场景升级</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 item">
                <img class="d-none d-md-block" src="img/target-1.png" alt="">
                <div class="sub-title">金服平台</div>
                <div class="desc text-center">
                    <p>助力钱包、小贷、基金、保险、信托、证券等</p>
                    <p>金融服务平台APP 消费场景升级</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 item">
                <img class="d-none d-md-block" src="img/target-1.png" alt="">
                <div class="sub-title">企业福利</div>
                <div class="desc text-center">
                    <p>助力国有、私营、外资、人力资源公司等</p>
                    <p>企业报销与福利系统消费场景升级</p>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 item">
                <img src="img/target-4.png" alt="">
                <div class="sub-title">智能终端</div>
                <div class="desc text-center">
                    <p>助力机器人、汽车中控、电子屏、商用电视等</p>
                    <p>人工智能语音消费场景升级</p>
                </div>
            </div>
        </div>
    </div>
</div>

css

.target-customer {
    min-height: 265px;
    background-color: var(--bg-target-color);
}

.target-customer .title {
    height: 80px;
    line-height: 80px;
    font-size: 30px;
    color: var(--title-color);
    font-weight: normal;
}

.target-customer .row .item {
    /* 想要居中:这里使用弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;

    height: 135px;

    /* 要小手 */
    cursor: pointer;

    overflow: hidden;
}

.target-customer .sub-title {
    /* 放到中间 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 24px;
    color: var(--title-color);

    /* 动画:慢慢往上 */
    transition: top 0.6s ease;
   
}

.target-customer .desc {
    position: absolute;
    /* 让它溢出看不见 */
    top: 132%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);

    font-size: 16px;

    transition: top 0.6s ease;
     /* 默认透明度为0,动画时候为1,有渐变效果地出现 */
     opacity: 0;
}

/* 大屏 */
@media (min-width:768px) {
    .target-customer .row .item:hover .sub-title {
        top: 35%;
    }
    .target-customer .row .item:hover .desc {
        top: 75%;
        opacity: 1;
    }
}

/* 小屏 */
@media (max-width:768px) {
    .target-customer .row .sub-title {
        top: 40%;
        font-size: 16px;
    }

    .target-customer .row .desc {
        top: 75%;
        opacity: 1;
        font-size: 14px;
    }

    /* 背景颜色 */
    .target-customer .row .item:nth-child(odd){
        background-color: white;
    }
    .target-customer .row .item:nth-child(even){
        background-color:  var(--bg-target-color);
    }
}

参考

transform:translate()方法坐标详解_无名之辈程序媛的博客-CSDN博客_transform: translate

转载请注明出处或者链接地址：https://www.qianduange.cn//article/8207.html
标签
bootstrap
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

人大金仓数据库KingbaseES中JSON_SET函数的使用介绍

2024-05-22 09:05:20

记录 spring boot 无法获取 post json 数据

2024-05-22 09:05:18

利用Jackson封装常用的JsonUtil工具类

2024-05-22 09:05:17

JSON parse: Cannot deserialize value of type ‘XXX‘ from Array value (token `JsonToken.START_ARRRAY`)

2024-05-22 09:05:15

JSON三种数据解析方法

2024-05-22 09:05:13

json-editor-vue3 (Json字段编辑器 )

2024-05-22 09:05:05

JSON parse error: Cannot deserialize value of type `java.lang.String` from Object value (token `Json

2024-05-22 09:05:05

【百度云盘项目实践(1)】：探索JSON与Bundle库的结合应用

2024-05-22 09:05:01

使用nvm管理(切换)node版本

2024-05-22 09:05:48

nvm安装和使用保姆级教程（详细）

2024-05-22 09:05:22

大家推荐的文章
1

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
2

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
3

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
4

UE4.27支持HTML5

2024-05-07 13:05:261000
5

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
6

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
7

jQuery事件处理

2024-03-12 01:03:321000
8

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
9

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
10

echarts实现动态渲染多柱图

2024-02-12 14:02:341000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！