<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. Linux上安装JDk教程

    使用如下命令 uname –a.如果输出结果中含有X86_64,表明系统是64位的,如果出现i686,证明系统是32位的. 没有安装包,就去官网下载 http://www.oracle.com/tec ...

  2. kubernetes报错

    错误信息:执行yaml文件后,服务在运行,但是提示命令找不到 原因:没有环境,相当于只有一个快捷方式 环境目录为/usr/local/bin 解决办法:将/etc/ansible/bin下的文件都拷贝 ...

  3. hdu 5791 思维dp

    题目描述: 求序列A,B的公共子序列个数: 基本思路: 想到了dp,选的状态也对,但是就是就是写不出状态转移方程,然后他们都出了,到最后我还是没出,很难受,然后主要是没有仔细考虑dp[i][j],dp ...

  4. dubbo管理平台安装

    dubbo-admin.war可在网上百度去下载,但是我下载了好几个,发布上去服务启动都报错,这个时候大概是我们系统的JDK和编译dubbo-admin.war的JDK版本不同导致的了,强烈建议自己下 ...

  5. HTML5 worker计数器简单示例

    效果图: index.html var w; // 开始 function startWorker() { if (typeof (Worker) !== "undefined") ...

  6. 分布式项目pom

    <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit ...

  7. move_base 分层代价地图的作用（翻译）

    A. 标准层 ​ Static Map Layer:为了做全局规划,机器人需要一个超越其传感器的地图,以了解墙壁和其他静态障碍物的位置. 静态地图可以先用SLAM算法生成,也可以从架构图中创建. 当层 ...

  8. java基础集合底层介绍

    ArrayList.Vector.HashMap.HashTable.HashSet的默认初始容量.加载因子.扩容增量 这里要讨论这些常用的默认初始容量和扩容的原因是: 当底层实现涉及到扩容时,容器或 ...

  9. PHP面试 PHP基础知识 七（文件及目录处理）

    文件操作 文件打开函数 fopen()函数 //用来打开一个文件 打开时需要指定打开模式 语法:fopen( filename, mode, include_path, context); filen ...

  10. 2019杭电多校第四场hdu6621 K-th Closest Distance(二分答案+主席树)

    K-th Closest Distance 题目传送门 解题思路 二分答案+主席树 先建主席树,然后二分答案mid,在l和r的区间内查询[p-mid, p+mid]的范围内的数的个数,如果大于k则说明 ...