HTML连载71-翻转菜单练习
一、翻转菜单练习
<!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-翻转菜单练习的更多相关文章
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- 【译】仿Taasky的3D翻转菜单动画实现
最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...
- CSS3实现翻转菜单效果
演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- HTML翻转菜单练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 3D立方体翻转菜单实现教程
今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...
- Extjs 知识体系1-dom操作
操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...
- Ext-js使用指南（总结）
一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById ...
- Java文件操作源码大全
Java文件操作源码大全 1.创建文件夹 52.创建文件 53.删除文件 54.删除文件夹 65.删除一个文件下夹所有的文件夹 76.清空文件夹 87.读取文件 88.写入文件 99.写入随机文件 9 ...
- CSS3实现3d菜单翻转
transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...
随机推荐
- git 控制版本
git:版本控制工具 1.进入想要进行版本控制项目的文件夹内 2.右击->Git Bash Here 3.初始化 git init 会多出一个.git隐藏文件夹 4.查看文件状体 git sta ...
- Django2 外键遇到的坑
# 出版社 class Publisher(models.Model): # 自增.主键 id id = models.AutoField(primary_key=True) # varchar(32 ...
- 英语学习app——Alpha发布2
英语学习app--Alpha发布1 这个作业属这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ ...
- 数据库中事务的ACID特性
数据库中事务的ACID特性 前言前面我们介绍过数据库中 带你了解数据库中JOIN的用法 与 带你了解数据库中group by的用法 的相关用法.本章节主要来介绍下数据库中一个非常重要的知识点事务,也是 ...
- a标签跳转小程序
随着小程序应用的逐步广泛,与公众号之前的协同运营越来越重要,通过公众号的各个入口为小程序导流.最近在运营中发现,大家对公众号关注后回复.关键词回复,超链接小程序的需求. 首先把小程序绑定 ...
- pku-3321 Apple Tree（dfs序+树状数组）
Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow ...
- 【WPF学习】第四章 加载和编译XAML
前面已经介绍过,尽管XAML和WPF这两种技术具有相互补充的作用,但他们也是相互独立的.因此,完全可以创建不使用XAML和WPF应用程序. 总之,可使用三种不同的编码方式来创建WPF应用程序: 只使用 ...
- Ceph 存储集群3-部署：
ceph-deploy 工具是一种部署 Ceph 的方法,它只依赖到服务器的 SSH 访问. sudo 和 Python .它可在你的工作站上运行,不需要服务器.数据库.或其它工具.如果你安装.拆卸过 ...
- 办公环境下k8s网络互通方案
在 kubernetes 的网络模型中,基于官方默认的 CNI 网络插件 Flannel,这种 Overlay Network(覆盖网络)可以轻松的实现 pod 间网络的互通.当我们把基于 sprin ...
- Powershell下git中文乱码
问题 使用git log查看提交历史, 发现中文的部分出现了乱码, 如图 解决方案 powershell中输入下面的命令 git config --global core.quotepath fals ...