<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. idea激活教程，最新！！！

    1.下载破解补丁(关键). 破解补丁:JetbrainsIdesCrack-4.2-release.jar百度云地址:https://pan.baidu.com/s/18ovphd7sm7oYXQb4 ...

  2. Java中的List集合

    List集合继承自collection接口,他自己也是个接口,没有具体的结构,与Set集合不同,List集合允许重复的元素. List集合特有方法:(Collection中没有这些) 这些在Arral ...

  3. 数据结构（c语言版，严蔚敏）第2章线性表

    弟2章线性表

  4. v-for 循环 绑定对象 和数组

    <!--v-for 迭代数组--> <div id="app11"> <div v-for="info in infos"> ...

  5. 【LeetCode 13】罗马数字转整数

    题目链接 [题解] 就是上一题反过来的过程. 因为有说一般情况下后面的罗马数字是小于前面的罗马数字的. 如果前面的罗马数字小于后面的罗马数字了. 说明出现了4,9,40,90这些特殊情况. 那么就得判 ...

  6. [SDOI2015]排序 题解 (搜索)

    Description 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N),第i中 ...

  7. angularjs 中实现 load more 功能

    在UI 我们经常需要render 一些集合, 如果集合数据过多,那我们可能会采取分页的解决方案,本文是另外一种解决方法,就是当集合数量大于一定数量的时候显示一个 加载更多按钮,点击后,自动加载指定数量 ...

  8. jmeter 创建接口测试案例

    1 怎么做接口测试? 一般情况下,由于我们项目前后调用主要是基于http协议的接口,所以测试接口时主要是通过工具或代码模拟http请求的发送和接收.所以我们下面整理了一下使用Jmeter工具进行htt ...

  9. Nginx 配置参数

    1 Proxy_send_timeout 定义后端在多久的时间内必须返回完所有的数据给Nginx. 2 Proxy_read_timeout

  10. POJ 1269 Intersecting Lines (判断直线位置关系)

    题目链接:POJ 1269 Problem Description We all know that a pair of distinct points on a plane defines a li ...