HTML连载71-翻转菜单练习

一、翻转菜单练习

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D174_OverturnMenu</title><style>*{margin:0;padding:0;}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-翻转菜单练习相关推荐

php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
html实现3d转换效果,教你如何用CSS实现3D翻转效果的菜单
随着浏览器技术的进步,CSS动画技术已经不是只那些简单的淡入淡出效果或幻灯片效果,它们能做很多更强大的事情.我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简 ...
300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
html左侧导航菜单多级,css3多级菜单导航栏、侧边菜单栏
一.简单的导航栏首先通过一个入门级的导航栏来练习一下 1.先布局好html的结构 2.通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理,在不同过js的情况下,就可以轻松 ...
从零玩转HTML5前端+跨平台开发上
评价:有激情,非常接地气,谈吐也非常清晰,视频快看完了,记忆中没有一个字是听不懂.而讲课也讲得很详细,称得上是面面俱到的了关注公众号,免费获取资料课程目录简介: 章节1基础知识课时1课程须知课 ...
matlab模拟角度调制系统的仿真与设计,基于Matlab的模拟通信系统的仿真设计
<基于Matlab的模拟通信系统的仿真设计>由会员分享,可在线阅读,更多相关<基于Matlab的模拟通信系统的仿真设计(25页珍藏版)>请在人人文库网上搜索. 1.目录摘要-第 ...
【HTML/CSS】从放弃到入门-笔记1
从放弃到入门1 ⇒ 从放弃到入门2 了解浏览器浏览器和服务器(了解) 浏览器是一款软件,浏览器功能:1将网页渲染出来给用户查看,2让用户通过浏览器与网页交互不同浏览器的内核不同,渲染效果会有小的差 ...
历代iphone详细对比
相关参数四代:iPhone 4 三代:iPhone 3GS 二代:iPhone 3G 一代:iPhone 上市时间 6月24日 2009年06月 2008年07月 2007年8月特点外观比前代有 ...
SOLIDWORKS快捷键167个小技巧
SOLIDWORKS软件作为Dassault在主流市场的主要品牌,SOLIDWORKS遵循易用性,稳定性和创新性的原则,并继续进行技术创新,赢得了杰出的技术和市场表现. 在市场大环境下,SOLIDWO ...

HTML连载71-翻转菜单练习

HTML连载71-翻转菜单练习相关推荐

最新文章

热门文章