css3 menu 手机菜单3
首先看一下效果图;
效果1，主要是 scale(0) -->scale(1px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环
.five b {transform: scale(0); opacity: 0;}
.five:hover b {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.five i {transform: scale(0); opacity: 0;}
.five:hover i {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
效果2，主要是 scale(1.5) -->scale(1px);opacity:0;—>opacity: 1;自己弄个cubic-bezier(0.175, 0.885, 0.32, 1.275)；类似弹簧
.six a {transform: scale(1.5); opacity: 0;}
.six:hover a {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
以下是源代码：
<!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侧边栏菜单3</title>
<style type="text/css">
@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 {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: 150px;
-webkit-filter: blur(1px); /* Chrome, Opera */
-moz-filter: blur(1px);/*火狐需要svg 实现*/
-ms-filter: blur(1px);
filter: blur(1px);}
.grid>li:hover b {opacity: 1;} .sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;} /*Five*/
.five b {transform: scale(0); opacity: 0;}
.five:hover b {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.five i {transform: scale(0); opacity: 0;}
.five:hover i {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);} .sidenav li:nth-child(1) i {transition-delay: .48s;}
.sidenav li:nth-child(2) i {transition-delay: .40s;}
.sidenav li:nth-child(3) i {transition-delay: .32s;}
.sidenav li:nth-child(4) i {transition-delay: .24s;}
.sidenav li:nth-child(5) i {transition-delay: .16s;}
.sidenav li:nth-child(6) i {transition-delay: .08s;} /*Six*/
.six a {transform: scale(1.5); opacity: 0;}
.six:hover a {transform: scale(1); opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>利用 scale </h1>
<ul class="grid">
<li class="five">
<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>Ripple Effect</h2></section>
</li>
<li class="six">
<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>Scroll Down</h2></section>
</li>
</ul> </body>
</html>
css3 menu 手机菜单3的更多相关文章
- css3 menu 手机菜单1
首先看一下效果图; 效果1,主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己 ...
- 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 ...
随机推荐
- iOS 获取高速随机路径sandbox目录
NSLog(@"%@", NSHomeDirectory());//沙盒主目录 NSLog(@"%@", NSTemporaryDirectory());//砂 ...
- 不root的情况下 查看App的数据表
一直以来查看sqlite的数据库都须要root才干查看,可是公司的好多測试机root起来比較麻烦~~~ 近期刚好项目上线,略闲, 于是决定写一个libraryproject便于以后调试代码 关键代码例 ...
- Windows Phone开发（17）：URI映射
原文:Windows Phone开发(17):URI映射 前面在讲述导航的知识,也讲了控件,也讲了资源,样式,模板,相信大家对UI部分的内容应该有了很直观的认识了.那么今天讲什么呢?不知道大家在练习导 ...
- java web开发人员经常使用标签
struts标签库 国际化配置 配置国际化 1.国际化配置 在struts自带的app中的struts-config.xml中的<message-resources parameter=&quo ...
- proxy pattern 代理模式
常用的几种代理模式简要说明如下: (1) 远程代理(Remote Proxy):为一个位于不同的地址空间的对象提供一个本地的代理对象,这个不同的地址空间可以是在同一台主机中,也可是在另一台主机中,远 ...
- C++习题 复数类--重载运算符+
Description 定义一个复数类Complex,重载运算符"+",使之能用于复数的加法运算.将运算符函数重载为非成员.非友元的普通函数.编写程序,求两个复数之和. Input ...
- C++ Primer 学习笔记_53_类和数据抽象 --友元、static员
分类 --友元.static成员 一.友元 友元机制同意一个类将对其.友元关系:一个样例 如果一个窗体管理类Window_Mgr可能须要訪问由其管理的Screen对象的内部数据.Screen应该同意其 ...
- A Mathematical Curiosity
A Mathematical Curiosity Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/O ...
- hdu 5094 Maze（水搜索）
题目意思:说有一个人在(1,1) 他的目标点在(n,m) 每次是4方向的移动: 限制条件:有的各自之间有墙 或者门,强不可通过,有对应的要钥匙可以开启这个类型的所有门: 问题:求最少步骤数(和): 类 ...
- c++ primer 函数传值1
不看c++ primer 永远不知道自己基础有多差 函数的參数传值一般有两种方式:值传递,引用传递. 值传递有以下两种形式: void func( int a ) { // } void func1 ...