前端bootstrap案例：网格系统鼠标悬浮动画显示响应式布局(代码片段)

关键词：

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

鼠标悬浮，闪烁动画；绑定变量，闪烁动画(代码片段)

原文:鼠标悬浮，闪烁动画；绑定变量，闪烁动画前端代码1<Windowx:Class="WpfApp2.Window3"2xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"3xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"4xmlns:d="http://schemas.microsoft.com/expression/blend/2008"5xmlns... 查看详情

前端bootstrap案例：轮播图(代码片段)

bootstrap框架系列案例案例网址【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情

前端bootstrap案例：导航栏(代码片段)

bootstrap框架系列案例案例网址【前端】Bootstrap案例：导航栏https://blog.csdn.net/karshey/article/details/127372691【前端】Bootstrap案例：轮播图https://blog.csdn.net/karshey/article/details/127388528【前端】Bootstrap案例 查看详情

利用:before:after伪类实现鼠标悬浮动画效果

1、最近在逛网站的时候，想找一下喜欢的鼠标悬浮效果，避免广告的嫌疑，直接放图了： 2、在实现的时候，如果在直接使用鼠标hover,transform,进行过渡，不能达到想要的效果，因为同时只能触发一张图片的动画效果，鼠标一... 查看详情

实现鼠标悬浮内容自动撑开的过渡动画

需要为一个列表添加个动画，容器的高度是不确定的，也就是高度为 auto，悬浮时候撑开内容有个过渡动画。用 CSS3 实现的话，由于高度的不确定，而 transtion 是需要具体的树枝，所以设置 height:auto 是... 查看详情

bootstrap网格系统

1.简介Bootstrap官方文档有关网格系统的描述：“Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于... 查看详情

bootstrap网格系统

 1.Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。2.什么是网格？   在平面设计中，网格是一种由一系列用于组织内容的相交的直线（... 查看详情

❤️前端bom笔记-三大系列事件与动画函数(附带动图案例)(代码片段)

三大系列事件与动画函数1.1.元素偏移量offset系列1.1.1offset概述1.1.2offset与style区别offsetstyle1.1.3案例：获取鼠标在盒子内的坐标1.1.4案例：模态框拖拽案例分析1.1.5案例：仿京东放大镜案例分析1.2.元素可视区client系列1.2.1... 查看详情

一个非常好用的文字滚动的案例，鼠标悬浮可暂停

网上找了很多，万变不离其宗，写法核心都是一样的，在这里我给大家总结一下，可收藏备用。html:<div class="scroll">    <ul class="list">        <li><a h 查看详情

Bootstrap 4网格系统错误[重复]

】Bootstrap4网格系统错误[重复]【英文标题】：Bootstrap4GridSystemError[duplicate]【发布时间】：2018-07-1715:17:39【问题描述】：开始学习Bootstrap4和响应式网格系统。下面的代码是我的html。调整窗口大小时，所有列都可以正常工作，直到... 查看详情

css-transition和transform实现图片悬浮移动动画

今天在京东首页上看到一个效果，鼠标悬浮在图片上时，图片发生移动，鼠标移走时再移回，并且有一个过渡效果。貌似很简单，自己做做试试吧我首先使用的是jquery在鼠标悬浮到图片上给图片增加一个类，这个类的样式使用ani... 查看详情

Bootstrap 嵌套网格系统最佳实践

】Bootstrap嵌套网格系统最佳实践【英文标题】：BootstrapNestedGridSystemsBestPractices【发布时间】：2014-05-3123:25:08【问题描述】：我正在尝试使用引导程序创建一个站点，而不使用外部css。看来我可以使用嵌套网格系统实现许多格式化... 查看详情

:before:after伪类实现鼠标悬浮动画(代码片段)

<divid="meizu1"><li>dede</li></div>div#meizu1li:beforecontent:url(11.png);position:relative;display:block;transition:transform1s;div#meizu1li:aftercontent:url(12.png);positi 查看详情

前端特效demo|值得收藏的6个html5canvas实用案例

 HTML5动画在Canvas上得到了充分的发挥，我们VIP视频也分享过很多相关的动画特效制作视频，这次给大家带来6款超炫酷的HTML5canvas动画的demo，一起来看看吧~ 文内附有时钟效果代码demo下载地址，感兴趣的小伙伴们可以收藏... 查看详情

bootstrap----网格系统(代码片段)

...过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap网格系统是如何工作的：行必须放置在 .container class内，以便获得适当的对齐（alignment）和内边距（padding）使用行来创建列的水平组内容应该放置在列内，... 查看详情

anjular+bootstrap前端开发案例实战

我们将利用Angularjs和Bootstrap，开发一个前端应用实例，通过这一次简单的项目实战，引领大家进入AngularJS前端开发的殿堂，并向大家介绍一下几个知识点：MVC基础，通过项目实例，让大家初步体会MVC设计模式的应用。构建我们第... 查看详情

bootstrap - 网格系统 - 连续折叠/展开 1 个项目

】bootstrap-网格系统-连续折叠/展开1个项目【英文标题】：bootstrap-grid-system-collapse/expandonly1iteminarow【发布时间】：2018-02-0722:27:00【问题描述】：我在一个网格系统上开发，其中有几个连续折叠的项目。点击标题或缩略图时触发折... 查看详情

Bootstrap 网格系统 - 如何使两列高度相等？ [复制]

】Bootstrap网格系统-如何使两列高度相等？[复制]【英文标题】：Bootstrapgridsystem-howtomaketwocolumnswithequalheight?[duplicate]【发布时间】：2017-02-0816:41:40【问题描述】：如何在Bootstrap网格列中使两列具有相同的高度？.item-textpadding:30px!impo... 查看详情