1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>99-翻转菜单-综合练习</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .nav{
  12.             width: 400px;
  13.             height: 40px;
  14.             margin: 0 auto;
  15.             margin-top: 100px;
  16.             background-color: black;
  17.         }
  18.         .nav>li{
  19.             list-style: none;
  20.             float: left;
  21.             width: 120px;
  22.             height: 40px;
  23.             background-color: green;
  24.             margin-left: 10px;
  25.             text-align: center;
  26.             line-height: 40px;
  27.             /*
  28.              li 设置为relative，.sub设置为absolute，表示定位流，这样菜单不会被div覆盖
  29.             */
  30.             position: relative;
  31.         }
  32.         .sub{
  33.             /*不显示元素*/
  34.             /*display: none;*/
  35.             width: 120px;
  36.             position: absolute;
  37.             /*
  38.             定位流一般要加left等
  39.             */
  40.             left: 0;
  41.             top: 40px;
  42.         }
  43.         .sub li{
  44.             list-style: none;
  45.             background-color: deeppink;
  46.             /*开始的时候文字翻转180*/
  47.             transform: rotateY(180deg);
  48.             transition: all 1s;
  49.             opacity: 0;
  50.         }
  51.         /*
  52.         .nav>li:hover .sub{
  53.             display: block;
  54.         }
  55.         */
  56.         .nav>li:hover .sub li{
  57.             /*鼠标悬浮的时候，恢复默认状态，达到翻转的效果*/
  58.             transform: none;
  59.             opacity: 1;
  60.         }
  61.         /*下面对li做一个动画延迟，模拟按顺序执行动画*/
  62.         .nav>li:hover .sub li:nth-child(1){
  63.             transition-delay: 0ms;
  64.         }
  65.         .nav>li:hover .sub li:nth-child(2){
  66.             transition-delay: 200ms;
  67.         }
  68.         .nav>li:hover .sub li:nth-child(3){
  69.             transition-delay: 400ms;
  70.         }
  71.         .nav>li:hover .sub li:nth-child(4){
  72.             transition-delay: 600ms;
  73.         }
  74.         .nav>li:hover .sub li:nth-child(5){
  75.             transition-delay: 800ms;
  76.         }
  77.  
  78.         .nav>li .sub li:nth-child(5){
  79.             transition-delay: 0ms;
  80.         }
  81.         .nav>li .sub li:nth-child(4){
  82.             transition-delay: 200ms;
  83.         }
  84.         .nav>li .sub li:nth-child(3){
  85.             transition-delay: 400ms;
  86.         }
  87.         .nav>li .sub li:nth-child(2){
  88.             transition-delay: 600ms;
  89.         }
  90.         .nav>li .sub li:nth-child(1){
  91.             transition-delay: 800ms;
  92.         }
  93.         div{
  94.             width: 400px;
  95.             height: 300px;
  96.             background-color: red;
  97.             margin: 0 auto;
  98.         }
  99.     </style>
  100. </head>
  101. <body>
  102. <ul class="nav">
  103.     <li>一级菜单
  104.         <ul class="sub">
  105.             <li>二级菜单</li>
  106.             <li>二级菜单</li>
  107.             <li>二级菜单</li>
  108.             <li>二级菜单</li>
  109.             <li>二级菜单</li>
  110.         </ul>
  111.     </li>
  112.     <li>一级菜单
  113.         <ul class="sub">
  114.             <li>二级菜单</li>
  115.             <li>二级菜单</li>
  116.             <li>二级菜单</li>
  117.             <li>二级菜单</li>
  118.             <li>二级菜单</li>
  119.         </ul>
  120.     </li>
  121.     <li>一级菜单
  122.         <ul class="sub">
  123.             <li>二级菜单</li>
  124.             <li>二级菜单</li>
  125.             <li>二级菜单</li>
  126.             <li>二级菜单</li>
  127.             <li>二级菜单</li>
  128.         </ul>
  129.     </li>
  130. </ul>
  131. <div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
  132. </body>
  133. </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. SpringApplication执行流程

    SpringApplication类的直接作用是在main方法中通过自有的run方法启动spring应用. 具体的run方法为: public static ConfigurableApplicati ...

  3. mysql group_concat(column) 函数替换成 oracle wm_concat(colum)

    11gr2和12C上已经摒弃了wm_concat函数,所以只能手动创建该函数 解决办法: 一.解锁sys用户 alter user sys account unlock; 二.创建包.包体和函数 以s ...

  4. 前端开发【第一篇: HTML】

    HTML初识  1.什么是HTML? HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).  2.网页的组成 我们平时 ...

  5. wpf UI 元素类型

  6. [转]keepalived简介

    https://www.jianshu.com/p/b050d8861fc1 contents: 什么是Keepalived VRRP协议简介 Keepalived原理 Keepalived配置文件详 ...

  7. datePecker时间控件区间写法

    成交时间: <input type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'#F{$d ...

  8. 《ProgrammingHive》阅读笔记-第二章

    书本第二章的一些知识点,在cloudera-quickstart-vm-5.8.0-0上进行操作. 配置文件 配置在/etc/hive/conf/hive-site.xml文件里面,采用mysql作为 ...

  9. SignalTap导致PCIe Read/Write卡死

    /********************************************************************** * SignalTap导致PCIe Read/Write ...

  10. django中向用户发送邮件信息

    发送邮件来让用户激活,因此,邮件中需要包含用户信息.但用户信息需要加密才可以.因此加密采用的是itsdangerous中的TimedJSONWebSignatureSerializer. 参考链接:h ...