css3 menu 手机菜单1
首先看一下效果图;
效果1，主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环
.one a {transform: translateY(100px); opacity:0;}
.one:hover a {transform: translateY(0px);-webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s ease-in-out ; opacity: 1;}
效果2，主要是 translateX(100px) -->translateX(0px);opacity:0;—>opacity: 1; 然后递归延迟
.two a {transform: translateX(100px); opacity: 0;}
.two:hover a {transform: translateX(0);transition: all 0.4s ease-in-out ; opacity: 1;}
效果3，主要是 translateY(100px) -->translateY(0px);translateX(100px) -->translateX(0px);opacity:0;—>opacity: 1; 然后递归延迟
.three a {transform: translateY(100px) translateX(100px); opacity: 0;}
.three:hover a {transform: translateY(0px) translateX(0); transition: all 0.4s; opacity: 1;}
效果4，主要是在上面3的基础上,css3 奇偶 判断; 然后递归延迟
.four li:nth-child(odd) b {transform: translateY(100px) translateX(100px); opacity: 0;}
.four li:nth-child(even) b {transform: translateY(100px) translateX(-100px); opacity: 0;}
.four:hover li b {transform: translateY(0px) translateX(0); transition: all .4s; opacity: 1;}
一下下是源代码:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3侧边栏菜单1</title>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--> <style type="text/css">
/*Fontawesome Iconfont*/
@import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css);
@import url(http://fonts.useso.com/css?family=Montserrat);
* {margin: 0; padding: 0;}
ul,li {margin: 0; padding: 0;list-style-type: none;} h1{width:1450px;margin: 0 auto; height:80px; line-height:80px;} .grid {width:1500px;margin: 0 auto;}
.grid > li { width:320px; height: 480px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }
.grid > li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);} .grid>li section {position: relative; transition: all 0.25s; width:320px; height:480px;}
.grid>li h2 {font: bold 14px montserrat; color: #eeeeee; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top:48px; padding: 10px 0; border:1px solid white; border-radius: 4px;} .sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}
.sidenav li { _overflow: hidden; width: 150px; }
.sidenav a { text-decoration: none; color: #eee; display: block; line-height: 48px; }
.sidenav span {display: block;}
.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }
.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; } /*All instances*/
section{ background:url(../../../images/TaylorSwift.jpg) no-repeat #333 center center /contain; height:500px;}
.grid>li:hover .sidenav {width: 150px;}
.grid>li:hover section {margin-left: 140px;}
.grid>li:hover b {opacity: 1;} /*one*/
.one li {overflow: visible;}
.one a {transform: translateY(100px); opacity:0;}
.one:hover a {transform: translateY(0px);-webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.4s ease-in-out ; opacity: 1;} /*two*/
.two li {overflow: visible;}
.two a {transform: translateX(100px); opacity: 0;}
.two:hover a {transform: translateX(0);transition: all 0.4s ease-in-out ; opacity: 1;} /*Three*/
.three li {overflow: visible;}
.three a {transform: translateY(100px) translateX(100px); opacity: 0;}
.three:hover a {transform: translateY(0px) translateX(0); transition: all 0.4s; opacity: 1;} /*Four*/
.four li {overflow: visible; width: 150px;}
.four li a i {opacity: 0; transition: all 0.4s;}
.four li:nth-child(odd) b {transform: translateY(100px) translateX(100px); opacity: 0;}
.four li:nth-child(even) b {transform: translateY(100px) translateX(-100px); opacity: 0;}
.four:hover li b {transform: translateY(0px) translateX(0); transition: all .4s; opacity: 1;}
.four:hover li a i {opacity: 1;} /*时间延迟 */
.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a, .sidenav li:nth-child(1) i {transition-delay: .08s;}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a, .sidenav li:nth-child(2) i {transition-delay: .16s;}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a, .sidenav li:nth-child(3) i {transition-delay: .24s;}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a, .sidenav li:nth-child(4) i {transition-delay: .32s;}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a, .sidenav li:nth-child(5) i {transition-delay: .40s;}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a, .sidenav li:nth-child(6) i {transition-delay: .48s;}
</style> </head>
<body>
<h1>利用 translateX 或者 translateY </h1>
<ul class="grid">
<li class="one">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><b>往上</b></a></li>
<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<section>
<h2>Slide Up</h2>
</section>
</li> <li class="two">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><b>左边</b></a></li>
<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<section>
<h2>Slide Left</h2>
</section>
</li> <li class="three">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><b>下左同时</b></a></li>
<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<section>
<h2>Slide Top Left</h2>
</section>
</li> <li class="four">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><b>奇偶交叉</b></a></li>
<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
</ul>
<section>
<h2>Criss-Cross</h2>
</section>
</li>
</ul>
</body>
</html>
css3 menu 手机菜单1的更多相关文章
- css3 menu 手机菜单3
首先看一下效果图; 效果1,主要是 scale(0) -->scale(1px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .five ...
- css3实现手机菜单展开收起动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jQuery手机菜单
效果展示 http://hovertree.com/texiao/nav/4/ 手机扫描二维码查看效果: 源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 11个优秀的HTML5 & CSS3下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...
- Android应用开发基础篇（10）-----Menu（菜单）
链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/28/2372101.html 一.概述 Menu,简单来理解就是当你按下手机的“menu”键时所 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...
- Android Menu 主菜单是使用
在Android里面每个Activity都绑定了一个Menu(菜单)有些时候我们需要使用到菜单.用法很简单,我们只需要重写onCreateOptionsMenu和onOptionsItemSelect ...
随机推荐
- Socket开发
Socket开发框架之消息的回调处理 伍华聪 2016-03-31 20:16 阅读:152 评论:0 Socket开发框架之数据加密及完整性检查 伍华聪 2016-03-29 22:39 阅 ...
- 解决tomcat开始出现in production environments was not found on the java.library.path:xxx
如图所看到的,Eclipse中启动tomcat时出现not found on the java.library.path等信息.能够通过下载tomcat-native-1.1.32-win32-bin ...
- 苹果公司的新的编程语言 Swift 高级语言（十一）－－初始化类的析构函数的一个实例
一 .实例的初始化 实例的初始化是准备一个类.结构或枚举的实例以便使用的过程. 初始化包含设置一个实例的每个存储属性为一个初始值,以及运行不论什么其他新的实例可以使用之前须要的设置或 ...
- javascript---在自由落体实现
实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...
- 优化移动设备上SharePoint 2013网站
优化移动设备上SharePoint 2013网站 本文由SPFarmer翻译自Waldek Mastykarz的文章 移动市场在持续的增长.在不远的将来,使用移动设备浏览站点将会超过电脑.为了保证用户 ...
- Lucene40SkipListWriter
多级跳跃表是保存在tim文件里的. tip是term index,tim是term dictionary.记忆方法是,p是pointer因此是term index. 这个类会保存多个level的las ...
- iOS Crash获取闪回日志和上传server
首先我们整理常常会闪退的异常哪些:数组越界.空引用.引用没有定义方法.内存空间不足等等. 怎样获取crash闪退日志 -- 工具查看 先看第一个问题怎样查看,我搜索的方法有下面几个: 第一个方法:XC ...
- .NET Core 1.0、ASP.NET Core 1.0和EF Core 1.0简介
.NET Core 1.0.ASP.NET Core 1.0和EF Core 1.0简介 英文原文:Reintroducing .NET Core 1.0, ASP.NET Core 1.0, and ...
- 【SICP读书笔记（一）】正则序展开的特殊情况
scheme解释器有两种实现方式,一种是应用序,先对每个参数求值,再以首过程对所有求得的参数求值. 第二种是正则序,会“完全展开然后归约”(书中原文) SICP中的练习1.5,让我困惑了一下.原题如下 ...
- Microsoft Visual C++ Runtime Library Runtime Error解决的方式
打开浏览器时,出现Microsoft Visual C++ Runtime Library Runtime Error错误,初步预计是软件冲突,可能有多种出错的方式,我的是浏览器自己主动关闭. 一. ...