一、翻转菜单练习​


<!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. spring cloud-config的client中/refresh的端点报错401

    post访问/refresh端口报错如下 { "timestamp": 1537865395040, "status": 401, "error&qu ...

  2. LeetCode动画 | 1038. 从二叉搜索树到更大和树

    今天分享一个LeetCode题,题号是1038,标题是:从二分搜索树到更大和数. 题目描述 给出二叉搜索树的根节点,该二叉树的节点值各不相同,修改二叉树,使每个节点 node 的新值等于原树中大于或等 ...

  3. for in 和 for i 十月 javascript 第一弹 记录

    for in 里面的 i 不仅有 数字还有这些鬼

  4. Ubuntu下cc和gcc的关系

    在编写makefile时找到过很多例子,其中有一些用的bash是cc,而有的则是gcc,然后就去查阅了一些相关资料.原来cc是Unix下的c编译器,而gcc则是Linux下的编译器.那么问题来了,在L ...

  5. [校内训练19_09_10]sort

    题意 给一个非负整数序列,每次问能否异或上一个正整数使得所有的数单调不减.如果能,输出最小的x,否则输出-1.单点修改.多测.要求最多一个log. 思考 只要考虑相邻的两个数.找到这两个数最高的不同的 ...

  6. ios--->ios消息机制(NSNotification 和 NSNotificationCenter)

    问题的背景 IOS中委托模式和消息机制基本上开发中用到的比较多,一般最开始页面传值通过委托实现的比较多,类之间的传值用到的比较多,不过委托相对来说只能是一对一,比如说页面A跳转到页面B,页面的B的值改 ...

  7. linux--->lnmp环境调试环境配置

    lnmp环境调试环境配置 nginx是一个web服务器,因此nginx的access日志只有对访问页面的记录,不会有php 的 error log信息. nginx把对php的请求发给php-fpm ...

  8. Linux 误删catlina.out导致磁盘空间爆满，无法查询到大文件解决办法

    大概是前俩天吧,发现公司的网站不定时的出现接口调不通的情况,便让手下小弟去服务器上查看一下,小弟告我磁盘空间满了,于是我让他处理一下.结果没想到他直接把 catlina.out 给干掉了.后果可想而知 ...

  9. ATL的GUI程序设计(4)

    第四章 对话框和控件 对于Win32 GUI的程序设计来说,其实大部分的情况下我们都不需要自己进行窗口类的设计,而是可以使用Win32中与用户交互的标准方式--对话框(Dialog Box).我们可以 ...

  10. 解决dotnet错误 System.InvalidOperationException Message=Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found.

    开始=>设置=>manage user certificats  (管理用户证书),里面所有的.net core的全部删除 然后控制台执行: dotnet dev-certs https ...