一、翻转菜单练习​


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D174_OverturnMenu</title>

    <style>

        *{

            margin:;

            padding:;

        }

        ul{

            width: 400px;

            height: 40px;

            margin:0 auto;

            margin-top: 100px;

            background-color: yellow;

        }

        .nav>li {

            list-style: none;

            float:left;

            width: 120px;

            height: 40px;

            margin-left:10px;

            background-color: green;

            line-height: 40px;

            text-align: center;

        }

        .sub{

            /*display: none;!*代表不显示元素*!*/

        }

        .sub>li{

            list-style: none;

            background-color: red;

            transform:rotateY(180deg);

            transition:all;

            /*opacity: 0;!*透明度，取值0-1*!*/

​

        }

        .nav>li:hover .sub li{

            transform:none;

        }

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

            transform:none;

            transition-delay:200ms;

        }

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

            transform:none;

            transition-delay:400ms;

        }

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

            transform:none;

            transition-delay:600ms;

        }

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

            transform:none;

            transition-delay:200ms;

        }

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

            transform:none;

            transition-delay:400ms;

        }

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

            transform:none;

            transition-delay:600ms;

        }

</style>

</head>

<body>

<ul class="nav" >

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li>一级菜单</li>

    <li>一级菜单</li>

</ul>

</body>

</html>

二、源码：

D174_OverturnMenu.html

D173_ShadowOfBoxAndWord.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D174_OverturnMenu.html

https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载71-翻转菜单练习的更多相关文章

  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. HTML翻转菜单练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  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. Java文件操作源码大全

    Java文件操作源码大全 1.创建文件夹 52.创建文件 53.删除文件 54.删除文件夹 65.删除一个文件下夹所有的文件夹 76.清空文件夹 87.读取文件 88.写入文件 99.写入随机文件 9 ...

  9. CSS3实现3d菜单翻转

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

随机推荐

  1. 3.JavaSE之注释

  2. 「 从0到1学习微服务SpringCloud 」05服务消费者Fegin

    系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」01 一起来学呀! 「 从0到1学习微服务SpringCloud 」02 Eureka服务注册与发现 「 从0到1学习微服务S ...

  3. Ubuntu下makefile的简单使用

    在Windows下,只需要简单的点击以下make,rebuild即可.而在Linux下,这样的IDE环境并没有提供,难道必须每一步都执行一遍吗?比较ok的做法自然是能够利用批处理脚本来进行操作了,这样 ...

  4. c#数字图像处理（十二）图像的腐蚀与膨胀

    背景知识 腐蚀与膨胀基本原理:就是用一个特定的结构元素来与待处理图像按像素做逻辑操作:可以理解成拿一个带孔的网格板(结构元素矩阵中元素为1的为孔)盖住图像的某一部分,然后按照各种不同的观察方式来确定操 ...

  5. c#数字图像处理（三）灰度直方图

    灰度直方图是灰度的函数,描述的是图像中具有该灰度级的像素的个数.如果用直角坐标系来表示,则它的横坐标是灰度级,纵坐标是该灰度出现的概率(像素的个数). using System; using Syst ...

  6. itext5和itext7操作pdf平铺和图层叠加(tiling, and N-upping)

    区别 itext5 生成pdf版本:1.4(Acrobat5.x) itext7 生成pdf版本:1.7(Acrobat8.x) iText7生成的pdf文件大, itext7 Java库更加系统和完 ...

  7. NOde.js的安装和简介

    1.nodejs的安装 1.1 检测nodejs的版本 node -v (version:版本) 1.2 path配置nodejs 的环境变量(当前版本都是自动安装配置环境变量)指令: path 1. ...

  8. MyBatis 介绍

    MyBatis 介绍 MyBatis 是一款优秀的 ORM(Object Relational Mapping,对象关系映射)框架,它可以通过对象和数据库之间的映射,将程序中的对象自动存储到数据库中. ...

  9. 如何获取 C# 类中发生数据变化的属性信息

    一.前言 在平时的开发中,当用户修改数据时,一直没有很好的办法来记录具体修改了那些信息,只能暂时采用将类序列化成 json 字符串,然后全塞入到日志中的方式,此时如果我们想要知道用户具体改变了哪几个字 ...

  10. 自己动手开发手机APP控制西门子200smart 教程（原创干货）

    自己动手开发手机APP控制西门子200smart 教程(原创干货)   自己动手开发手机APP控制西门子200smart 教程(原创干货) 2020-02-09 19:06:45 自己动手开发手机AP ...