<!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. Spring Boot + Spring Cloud 实现权限管理系统（解决跨域问题）

    什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. ...

  2. angularjs 下滑线滑动

    css: .detail_row { width: 410px; height: 34px; clear: both; border-bottom: 1px solid #eaeeef; font-s ...

  3. 蓝牙协议分析(5)_BLE广播通信相关的技术分析

    1. 前言 大家都知道,相比传统蓝牙,蓝牙低功耗(BLE)最大的突破就是加大了对广播通信(Advertising)的支持和利用.关于广播通信,通过“玩转BLE(1)_Eddystone beacon” ...

  4. 剑指Offer 46. 孩子们的游戏(圆圈中最后剩下的数) （其他）

    题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  5. 小程序点击按钮清空input

    大致的思路是先给标签input设置一个value <input value="{{value}}" placeholder="最大输入长度10"/> ...

  6. CSS权值

    选择器权值 标签选择器:权值为1 类选择器和伪类:权值为10 ID选择器:权值为100 通配符选择器:权值为0 行内样式:权值为1000 !important规则: 可调整样式规则的优先级 添加在样式 ...

  7. Golang基础之函数

    golang基础之函数 1.为什么需要函数? 有些相同的代码可能出现多次,如果不进行封装,那么多次写入到程序中,会造成程序冗余,并且可读性降低 2.什么是函数 为完成某些特定功能的程序指令集合称为函数 ...

  8. SQLI DUMB SERIES-11

    (1)检测构造方式 由此看出输入的用户名以及密码都被一对单引号所包含. 方法一: (2) 模拟真实环境,以用户的身份登录. (3)用burp抓包.开启抓包,输入用户名和密码,会自动跳到这个页面,右键, ...

  9. java-Set集合、HashSet集合、LinkedHashSet集合和TreeSet集合

    1.Set集合,无索引,不可以重复,无序(存取不一致) public class Demo { public static void main(String[] args) { //demo1(); ...

  10. 2.python发展历程

    创始人:吉多·范罗苏姆于1989年圣诞节在阿姆斯特丹编写 python分为: python 2.X python 3.X 使用python的公司: 豆瓣.BT.Dropbox.YouTube.Quor ...