<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>daohangtexiao</title>
<style>
   *{
     margin:0px;
     padding:0px;
     list-style:none;     /*列表序列号设置为没有*/
     font-family:"微软雅黑";
     }
.top-container{
    width:100%;
    height:40px;
    background-color:#6FF;
    }
.top-dao{
    width:500px;
    height:40px;
    margin:0px auto; /*  居中*/
    }
.top-dao-1v1{
    max-height:40px;
    width:100px;
    text-align:center;  /*文字水平居中*/
    line-height:40px;        /*字体行高*/
    overflow:hidden;    /*隐藏DIV*/
    float:left;       /*流动而已左对齐*/
    background-color:#FF9;
   }
   .top-dao-1v1 ul{
     opacity:0.5;     /*透明度设置*/
    }
.top-dao-1v1 .top-dao{
     border-radius:10px; /*边角设置为圆弧*/
    }
.top-dao-1v1:hover{
     max-height:400px;
     cursor: pointer; /* 鼠标小手*/
     transition:1s; /* 过渡效果设置*/
    }
    .top-dao-1v1 li:hover{
         
        background: linear-gradient(to right, red , blue);/* 色彩过渡*/
        }
</style>

</head>

<body>
<div class="top-container">
    <div class="top-dao">
        <div class="top-dao-1v1">坑
            <ul>
                <li>坑1</li>
                <li>坑1</li>
                <li>坑1</li>
                <li>坑1</li>
                <li>坑1</li>
            </ul>
        </div>
        <div class="top-dao-1v1">深坑
            <ul>
                <li>坑1</li>
                <li>坑1</li>
                <li>坑1</li>
            </ul>
          </div>
        <div class="top-dao-1v1">很坑
            <ul>
                <li>很坑1</li>
                <li>很坑1</li>
                <li>很坑1</li>
                <li>很坑1</li>
            </ul>
          </div>
        <div class="top-dao-1v1">坑点
            <ul>
                <li>坑点1</li>
            </ul>
        </div>
        <div class="top-dao-1v1">就是坑
            <ul>
                <li>就是坑1</li>
                <li>就是坑1</li>
                
            </ul>
        </div>
    </div>
</div>

</body>

css导行下拉动画的更多相关文章

  1. 利用max-height适应多尺寸屏幕的下拉动画

    移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性.比如我们要制作以下动画:红框2为详细内容,默认收起:红框1处为事件响应热区,点击后展开或收起红框2的 ...

  2. 非常酷的CSS3垂直下拉动画菜单

    昨天我向大家介绍了一款兼容性不错的jQuery淡入淡出下拉菜单,今天要分享一款相对绚丽的CSS3垂直下拉动画菜单,不过需要支持CSS3的浏览器才能有效果.下面是效果图,一起看看. 我们也可以在这里查看 ...

  3. css解决select下拉表单option高度的办法

    css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...

  4. Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画

    Android的动画的使用,请参考.Android的动画,在设计方面,我有点不太理解,觉得这样搞很怪,因为在控件动画后,即使设置了停留在动画结束时的位置,我们也确实看到了控件停在那个位置,但其实该控件 ...

  5. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  6. css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果

    HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...

  7. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  9. 实现仿UC浏览器首页下拉动画

    经常用UC看到首页有这么一个动画,就仿造写了一下. 实现分析 1.画曲线的动画 这个一眼看去就想到用贝塞尔曲线画,来看贝塞尔曲线方法,给出两个定点,和一个控制点就可以画. CGContextAddQu ...

随机推荐

  1. codeforces1156D 0-1-Tree 并查集

    题目传送门 题意: 给定一棵n个点的边权为0或1的树,一条合法的路径(x,y)(x≠y)满足,从x走到y,一旦经过边权为1的边,就不能再经过边权为0的边,求有多少边满足条件? 思路: 首先这道题,换根 ...

  2. PHP-组合总和

    给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...

  3. python_django_admin

    admin 是Django提供的基于web的管理工具,是系统管理员用于数据的输入,删除和查询的管理工具. 超级管理员在settings中的集成:INSTALLED_APPS=['django.cont ...

  4. redis集群添加新节点

    一.创建节点(接上文) 1.在H1服务器/root/soft目录下创建7002目录 2.将7001目录的配置文件redis.conf拷贝到7002,并修改配置文件的端口 3.进入 redis-5.0. ...

  5. 理解 Java 序列化

    一.什么是序列化 序列化是一种对象持久化的手段.类通过实现 java.io.Serializable 接口以启用其序列化功能. 序列化:把对象转换为字节序列的过程. 反序列化:把字节序列恢复为对象的过 ...

  6. spring AOP (使用AspectJ的注解方式 的aop实现) (6)

    目录 一.在 Spring 中启用 AspectJ 注解支持 二.AspectJ 支持 5 种类型的通知注解: 2.1.使用之前的 计算器接口和实现类 ArithmeticCalculator.jav ...

  7. html01. <!DOCTYPE html>

    解释 在HTML文档初,往往会有这么一句话<!DOCTYPE html>,它是html5标准网页声明,全称为Document Type HyperText Mark-up Language ...

  8. static变量、static函数与普通变量、普通函数的区别

    转自:http://blog.163.com/sunshine_linting/blog/static/44893323201191294825184/ 全局变量(外部变量)的说明之前再冠以stati ...

  9. 20140513 matlab画图

    1.matlab画图 x1=[1.00E-06,2.00E-06,4.00E-06,9.00E-06,2.00E-05,4.00E-05,8.00E-05,2.00E-04,4.00E-04,7.00 ...

  10. win7+ubuntu双系统安装

    XP+ubuntu双系统可參考 xp硬盘上安装ubuntu12.04双系统 1.XP安全不再,最终将吾等磨机的人逼上梁山,是时候做一个win7+ubuntu的双系统了. 废话少说,直接进入主题,先腾出 ...