<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. codeforces1139E Maximize Mex 二分图匹配

    题目传送门 题意:给出n个人,m个社团,每个人都有一个标号,一个能力值,并且属于一个社团,第i天的凌晨,第$k_i$个人会离开.每天每个社团最多派一个人出来参加活动.派出的人的能力值集合为S,求每天$ ...

  2. Hibernate与Mybatis的简单区别

    数据库连接创建.释放频繁造成系统的资源浪费从而影响系统性能,可以使用数据库连接池解决此问题,之前的java应用程序sql语句也是写在java代码中造成系统可维护性差,实际应用的sql变化较大,sql变 ...

  3. css 垂直居中、水平居中

    在父元素.子元素未知的情况下居中有两种方法: 第一种方法: .partent{ display:flex; justify-content:center; align-items:center; } ...

  4. Django 自定义 admin

    为 model 自定义显示 label是这个Field如果在form中的话会显示的.而verbose_name在form中不会显示.只是作为一种说明而已 callable()   -->  是否 ...

  5. 芜湖市2018市队选拔Day2T1

    好激动啊,Day2竟然AK了! Day2T1养宠物 Descriptionbadgers是可爱的动物,Smart想拥有一些.宠物店提供N个badgers,编号为1..N,Smart都很喜欢,所以他想拥 ...

  6. Anaconda配置

    0x00 下载 为了更快的下载,可以到清华开源软件镜像站下载 地址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 在此以Anaconda ...

  7. NX二次开发CreateDialog函数在UI.hxx文件和WinUser.h中的冲突【转载】

    文章出自https://blog.csdn.net/qq_41843732/article/details/91422764 在UG二次开发中,若使用MFC库,一旦加上#include<Afx. ...

  8. Codeforces gym102222 C. Caesar Cipher 签到

    题意: 给定一对用凯撒密码加密的明文和密文,再给你一个密文,让你解密出明文,保证有唯一解. 题解: 对凯撒密码的已知明文攻击,签到题. #include<iostream> using n ...

  9. 卿烨科技 Fireball

    9人开发病毒感染超2亿电脑!Fireball病毒境外做案被举报   原标题:名校毕业生研发病毒年获利8000万 2.5亿台电脑感染 海淀网友协助民警追踪跨境黑客 高材生开公司研发病毒 一年获利8000 ...

  10. JAVA中 成员变量和和实例变量区别

    java语言支持的变量类型 类变量:独立于方法之外的变量,用 static 修饰. 局部变量:类的方法中的变量. 实例变量(全局变量):独立于方法之外的变量,不过没有 static 修饰. publi ...