<!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. Python多线程基本操作

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...

  2. 【ANT】输入中文格式为乱码

    使用ant编译,打出的日志的格式为乱码,加上下面的指定编码后,输出为中文了. 为方便拷贝,将其贴出来 <jvmarg value="-Dfile.encoding=UTF-8" ...

  3. coursera-斯坦福-机器学习-吴恩达-笔记week4

    1 神经网络的提出 线性回归和逻辑回归能很好的解决特征变量较少的问题,但对于变量数量增加的复杂非线性问题,单纯增加二次项和三次项等特征项的方法计算代价太高. 2 神经网络算法 2.1 神经元 模拟神经 ...

  4. laravel5.5 调用系统自带登陆认证auth

    1执行命令 php artisan make:auth 2 编辑文件 config/auth guardes 'admin' => [ 'driver' => 'session', 'pr ...

  5. vue项目中多个组件之间传递数据

    //父组件<template> <div> <div style="float: left"> <input-data :city=&qu ...

  6. HTML⑤

    W3C : 万维网联盟!(World Wide Web Consortium ) 创建于1994年,是web技术领域最权威最具有影响力的标准机构! W3C规定了web技术领域相关技术的标准! 官网地址 ...

  7. TensorFlow函数：tf.random_shuffle

    tf.random_shuffle 函数 random_shuffle( value, seed=None, name=None ) 定义在:tensorflow/python/ops/random_ ...

  8. Fiddler常用命令

    几个常用的命令行方法使用: 查找对应响应码的数据包或请求类型的数据包: 输入“=post”将选择post的数据包并用蓝色底标色 输入:=502 查找服务器返回是图片类型的请求 输入 select im ...

  9. poi读取excel内容工具类

    该工具类可以读取excel2007,excel2003等格式的文件,xls.xlsx文件格式 package com.visolink; import org.apache.poi.hssf.user ...

  10. rod cutting

    for a rod of length i the price of it si pi,to cut the rod to earn more money package dynamic_progra ...