<!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. Appium混合应用测试

    Appium测试混合应用 混合应用即是原生应用中间混着html页面,需要在两种类型的页面之间跳转. 测试Android混合应用 前期设置 4.4以下版本使用automationName:Selendr ...

  2. jsp-MySQL连接池

    1．将数据库驱动程序的JAR文件放在Tomcat的 common/lib 中: mysql-connector-java-5.1.18-bin.jar 下载地址:https://yunpan.cn/c ...

  3. 升级Ubuntu 12.04下的gcc到4.7

    我们知道C++11标准开始支持类内初始化(in-class initializer),Qt creator编译出现error,不支持这个特性,原因在于,Ubuntu12.04默认的是使用gcc4.6, ...

  4. 设计模式08： Composite 组合模式（结构型模式）

    Composite 组合模式(结构型模式) 对象容器的问题在面向对象系统中,我们常会遇到一类具有“容器”特征的对象——即他们在充当对象的同时,又是其他对象的容器. public interface I ...

  5. ubuntu14.04LTS下制作安装启动U盘

    ubuntu自带的启动U盘制作工具在我的非UEFI电脑上无法启动,找到一个国产的好用东西:深度deepin-boot-maker. 下载地址(官方百度盘):点击下载 用起来也很简单,只需要选择下载好的 ...

  6. The Suspects——Asia Kaohsiung 2003

    原创 The Suspects Time Limit: 1000MS Memory Limit: 20000K Total Submissions: 48698 Accepted: 23286 Des ...

  7. XE下的FMX中压缩图片

    用FMX压缩图片,发现FMX里的canvas没有draw,stretch,cliprect类,FMX里程序创建时会自动引用FMX.Graphics, 而这个单元内的TBitmap类的Canvas没有S ...

  8. 使用"*"通配符来选择文件

    Include 方法和IncludeDirectory 方法中的搜索模式中指定的虚拟路径可以接受一个"*"通配符字符作为前缀或后缀,以在最后一个路径段.搜索字符串是大小写不敏感的. ...

  9. SQL server T-SQL存储过程

    简介 存储过程是由一些SQL语句和控制语句组成的被封装起来的过程,它驻留在数据库中,可以被客户应用程序调用,也可以从另一个过程或触发器调用.它的参数可以被传递和返回.与应用程序中的函数过程类似,存储过 ...

  10. 有符号数和无符号数------c++程序设计原理与实践（进阶篇）

    有符号数与无符号数的程序设计原则: 当需要表示数值时,使用有符号数(如 int). 当需要表示位集合时,使用无符号数(如unsigned int). 有符号数和无符号数混合运算有可能会带来灾难性的后果 ...