<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>99-翻转菜单-综合练习</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .nav{

            width: 400px;

            height: 40px;

            margin: 0 auto;

            margin-top: 100px;

            background-color: black;

        }

        .nav>li{

            list-style: none;

            float: left;

            width: 120px;

            height: 40px;

            background-color: green;

            margin-left: 10px;

            text-align: center;

            line-height: 40px;

            /*

             li 设置为relative，.sub设置为absolute，表示定位流，这样菜单不会被div覆盖

            */

            position: relative;

        }

        .sub{

            /*不显示元素*/

            /*display: none;*/

            width: 120px;

            position: absolute;

            /*

            定位流一般要加left等

            */

            left: 0;

            top: 40px;

        }

        .sub li{

            list-style: none;

            background-color: deeppink;

            /*开始的时候文字翻转180*/

            transform: rotateY(180deg);

            transition: all 1s;

            opacity: 0;

        }

        /*

        .nav>li:hover .sub{

            display: block;

        }

        */

        .nav>li:hover .sub li{

            /*鼠标悬浮的时候，恢复默认状态，达到翻转的效果*/

            transform: none;

            opacity: 1;

        }

        /*下面对li做一个动画延迟，模拟按顺序执行动画*/

        .nav>li:hover .sub li:nth-child(1){

            transition-delay: 0ms;

        }

        .nav>li:hover .sub li:nth-child(2){

            transition-delay: 200ms;

        }

        .nav>li:hover .sub li:nth-child(3){

            transition-delay: 400ms;

        }

        .nav>li:hover .sub li:nth-child(4){

            transition-delay: 600ms;

        }

        .nav>li:hover .sub li:nth-child(5){

            transition-delay: 800ms;

        }

        .nav>li .sub li:nth-child(5){

            transition-delay: 0ms;

        }

        .nav>li .sub li:nth-child(4){

            transition-delay: 200ms;

        }

        .nav>li .sub li:nth-child(3){

            transition-delay: 400ms;

        }

        .nav>li .sub li:nth-child(2){

            transition-delay: 600ms;

        }

        .nav>li .sub li:nth-child(1){

            transition-delay: 800ms;

        }

        div{

            width: 400px;

            height: 300px;

            background-color: red;

            margin: 0 auto;

        }

    </style>

</head>

<body>

<ul class="nav">

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

</ul>

<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

</body>

</html>

效果如下：

HTML翻转菜单练习的更多相关文章

  1. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  2. 【译】仿Taasky的3D翻转菜单动画实现

    最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...

  3. CSS3实现翻转菜单效果

    演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1 ...

  4. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  5. HTML连载71-翻转菜单练习

    一.翻转菜单练习​ <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. Extjs 知识体系1-dom操作

    操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...

  7. Ext-js使用指南（总结）

    一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById ...

  8. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  9. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

随机推荐

  1. vscode sass live compiler

    { "liveSassCompile.settings.formats": [{ "format": "expanded", "e ...

  2. JS的防抖和节流

    数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它 ...

  3. 防Bug笔记

    最近不知道咋回事,写代码特别多bug出来.故专门做一笔记,记下容易犯的bug,以期日后减少低级错误. Python 1. JavaScript 1.多用``, 少用''/""

  4. python基础——列表

    Python列表脚本操作符 列表对 + 和 * 的操作符与字符串相似.+ 号用于组合列表,* 号用于重复列表. 如下所示: Python 表达式 结果 描述 len([1, 2, 3]) 3 长度 [ ...

  5. Centos7.5安装Docker

    Docker是一个开源的应用容器引擎,使用Go语言开发,基于Linux内核的cgroup,namespace,Union FS等技术,对应用进程进行封装隔离,并且独立于宿主机与其他进程,这种运行时封装 ...

  6. Linux性能监控分析命令（一）—vmstat命令详解

    一.vmstat介绍 语法格式: vmstat [-V] [-n] [-S unit] [delay [count]] -V prints version. -n causes the headers ...

  7. Power BI Desktop 新年快乐！

    新年快乐 2018年是Power BI 多产的一年!更新发布的功能就超过150多个,真是相当的强大! 为了庆祝这一成功的一年,Power BI官方团队制作了一个有趣的视频,展示他们对2018年最喜欢的 ...

  8. easyui,文件引用

  9. 分布式高并发下Actor模型

    分布式高并发下Actor模型 写在开始 一般来说有两种策略用来在并发线程中进行通信:共享数据和消息传递.使用共享数据方式的并发编程面临的最大的一个问题就是数据条件竞争.处理各种锁的问题是让人十分头痛的 ...

  10. Redis集群配置（linux）

     *弄了一天,有问题直接问我.qq:137416943   1.redis集群的配置和简单使用   Redis集群配置 0.首先要配置环境: 0.1 安装c++ yum install gcc-c++ ...