<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. winpe

    winpe winpe winpe 工具 判断是否pe系统的方法:GetSystemDisk()

  2. 前端学习(十三）js运算符（笔记）

    类型转换:    1.强制类型转换:(数字字符串转数字) parseInt()        parseFloat()        Number()--严格转换 NaN:            不是 ...

  3. 前端学习(七）less（笔记）

    less---处理器:koala_2.0.4_portable 属于css预处理语言,可以让你的css语言更有逻辑性! 编译css的! 准备工作:    1.项目:        js         ...

  4. 基于React Native的跨三端应用架构实践

    作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能 ...

  5. loj2573[TJOI2018]数字计算

    题意:操作1:x=x*m,输出x%mod.2.x/=map[m].m即第m次操作,保证该次操作为1操作,并且每个操作最多只会被删一次.q<=1e5. 线段树维护操作信息的乘积,删除把对应位置的权 ...

  6. 【LeetCode 18】四数之和

    题目链接 [题解] 两重循环枚举[i..j]这个区间 同时规定必取nums[i]和nums[j] 那么现在的问题就变成在下标为[i..j]这个区间的数字里面找两个数字使他们的和为target-nums ...

  7. NYOJ 301 递推求值

    第一次写博客,拿个矩阵快速幂练练手吧. 首先什么是快速幂,快速幂是让复杂度由线性降为log n的算法,比如8^1024次方暴力要算1024次,但是矩阵快速幂只算10次就好. 此题只不过是把快速幂的底数 ...

  8. php开发面试题---php面向对象详解（对象的主要三个特性）

    php开发面试题---php面向对象详解(对象的主要三个特性) 一.总结 一句话总结: 对象的行为:可以对 对象施加那些操作,开灯,关灯就是行为. 对象的形态:当施加那些方法是对象如何响应,颜色,尺寸 ...

  9. Display与 Visibility的区别

    隐藏元素的方法有: display:none或visibility:hidden visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间.也就是说,该元素虽然被 ...

  10. PAT_A1124#Raffle for Weibo Followers

    Source: PAT A1124 Raffle for Weibo Followers (20 分) Description: John got a full mark on PAT. He was ...