<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>底部菜单上拉效果</title>
        <style>
            *{
                margin: 0;
            }
            .wrap{
                width: 1200px;
                margin: 50px auto;

}
            .wrap .item{
                width: 120px;
                height: 120px;
                border: 1px solid #ddd;
                background: url(img/1.jpg) no-repeat;
                background-size:100% 100%;
                position: relative;
                overflow: hidden;
            }
            .wrap .item .info{
                position: absolute;
                width: 100%;
                height: 40px;
                background:rgba(0,0,0,0.5);
                color: #fff;
                bottom: -40px;
                left: 0;
                transition: 0.75s all;
            }
            .wrap .item:hover .info{
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="item">
                <span class="info">斗破苍穹</span>
            </div>
        </div>
    </body>
</html>
---------------------
作者：AsaZyf
来源：CSDN
原文：https://blog.csdn.net/AsaZyf/article/details/83059771
版权声明：本文为博主原创文章，转载请附上博文链接！

CSS3--底部菜单上拉效果的更多相关文章

  1. 只用css3实现菜单的toggle效果

    一.原理: 使用label与input来实现,label和复选框是有关联的,label的for属性对应的是input的id,所以点击label时,它就会勾选或取消复选框. 如果我们需要让菜单默认显示, ...

  2. 菜单下拉效果demo记录

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  4. 大饱眼福 7款类型各异的CSS3实用菜单

    1.清新小图标的HTML5/CSS3侧边栏菜单 前我们分享过几款CSS3侧边栏菜单,像CSS3侧边栏菜单 带可爱的小图标菜单和CSS3侧边栏手风琴菜单,都非常不错.今天我们要分享的这款CSS3侧边栏菜 ...

  5. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  6. iScroll-5拉动刷新功能实现与iScroll-4上拉刷新的一点改进

    近来在学习移动设备的应用开发,接触了jQuery mobile,在网上查阅相关资料时发现一个叫”iScroll“的小插件.其实这个iScroll插件跟jQuery mobile没有多大关系,并不是基于 ...

  7. 让Android Support V4中的SwipeRefreshLayout支持上拉载入很多其它

    前言 原来的Android SDK中并没有下拉刷新组件,可是这个组件确实绝大多数APP必备的一个部件.好在google在v4包中出了一个SwipeRefreshLayout.可是这个组件仅仅支持下拉刷 ...

  8. Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件

    原文 http://blog.csdn.net/bboyfeiyu/article/details/39253051       前言 下 拉刷新组件在开发中使用率是非常高的,基本上联网的APP都会采 ...

  9. SwipeRefreshLayout实现上拉加载

    原来的Android SDK中并没有下拉刷新组件,但是这个组件确实绝大多数APP必备的一个部件.好在google在v4包中出了一个SwipeRefreshLayout,但是这个组件只支持下拉刷新,不支 ...

随机推荐

  1. qt-vs-addin：Qt4和Qt5之VS插件如何共存与使用（转）

    原则上,两者是不可以同时存在的,但是如果都安装了,该如何分别使用他们呢? Qt4 Visual Studio Add-in:官网可以下载安装程序,qt-vs-addin-1.1.11-opensour ...

  2. delphi监控文件夹

    (****************************************** 文件和目录监控 当磁盘上有文件或目录操作时,产生事件 使用方法: 开始监控: PathWatch(Self.Ha ...

  3. android 仿QQ气泡聊天界面

    1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效 ...

  4. C# 读取Text文本，写入Text文本

    //读取 private void showMess() { this.dataGridViewX2.Rows.Clear(); //将车辆信息一行行添加到datagreatview 里面 Strea ...

  5. 在成员函数中调用虚函数（关于多态的注意事项）------新标准c++程序设计

    类的成员函数之间可以互相调用.在成员函数(静态成员函数.构造函数和析构函数除外)中调用其他虚成员函数的语句是多态的.例如: #include<iostream> using namespa ...

  6. 模态显示PresentModalViewController

    1.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...

  7. React进阶篇（1） -- react-router4模块化

    本篇内容: 单一的路由无嵌套 多层嵌套路由 获取路径中的参数 按需加载 单一的路由无嵌套 routers.js import Home from 'components/Home'; import N ...

  8. 八大排序算法的python实现（四）快速排序

    代码: #coding:utf-8 #author:徐卜灵 #交换排序.快速排序 # 虽然快速排序称为分治法,但分治法这三个字显然无法很好的概括快速排序的全部步骤.因此我的对快速排序作了进一步的说明: ...

  9. 190225Redis

    一.Redis的简单使用 Redis操作模式 # Author:Li Dongfei import redis r = redis.Redis(host='192.168.56.7', port=63 ...

  10. SLAM入门必收藏的资料

    搜集了各大网络,请教了SLAM大神,终于把SLAM的入门资料搜集全了!在分享资料前,我们先来看看,SLAM技术入门前需要具备哪些知识?首先学习SLAM需要会C和C++,网上很多代码还用了11标准的C+ ...