css3 menu 手机菜单1

时间：2022-04-05 23:05:57

首先看一下效果图;

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的更多相关文章

  1. css3 menu 手机菜单3

    首先看一下效果图; 效果1,主要是 scale(0) -->scale(1px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环 .five ...

  2. css3实现手机菜单展开收起动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. jQuery手机菜单

      效果展示 http://hovertree.com/texiao/nav/4/ 手机扫描二维码查看效果: 源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm ...

  4. 24个 HTML5 &amp&semi; CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 10个优秀的 HTML5 &amp&semi; CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  6. 11个优秀的HTML5 &amp&semi; CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  7. Android应用开发基础篇（10）-----Menu（菜单）

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/28/2372101.html 一.概述 Menu,简单来理解就是当你按下手机的“menu”键时所 ...

  8. 10个优秀的 HTML5 &amp&semi;amp&semi; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  9. Android Menu 主菜单是使用

    在Android里面每个Activity都绑定了一个Menu(菜单)有些时候我们需要使用到菜单.用法很简单,我们只需要重写onCreateOptionsMenu和onOptionsItemSelect ...

随机推荐

  1. WPS for Linux（ubuntu）字体缺失解决办法（转）

    原文:http://www.cnblogs.com/liangml/p/5969404.html 启动WPS for Linux后,出现提示"系统缺失字体" . 出现提示的原因是因 ...

  2. 时间，闰秒，及NTP

    1.时间 格林尼治时间 GMT,以地球自转为准的时间,也叫世界时UT,但是由于自转速度会变化,所以后来不被作为标准. 世界协调时UTC,以原子钟为准,现在时间校准的标准就是原子钟. 2.闰秒 是指地球 ...

  3. Genymotion中SD卡目录在Eclipse中查看，以及创建SDCard

    咦?这后面似乎指向一个目录,我就去找/mnt/shell/emulated/0 Wow~好熟悉的目录..不熟悉的同学可以打开android模拟器的File Manger App 里面就是这些目录了,然 ...

  4. （大数据工程师学习路径）第一步 Linux 基础入门----数据流重定向

    介绍 开始对重定向这个概念感到些许陌生,但通过前面的课程中多次见过>或>>操作了,并知道他们分别是将标准输出导向一个文件或追加到一个文件中.这其实就是重定向,将原本输出到标准输出的数 ...

  5. Python库 - import matplotlib&period;pyplot as plt 报错问题

    为了避免各种问题,请使用最新的2.7.13安装文件   1.先设置好环境变量 在path变量中设置好以下路径: C:\Python27\Scripts C:\Python27    2.大部分报错问题 ...

  6. Kudu的集群安装（1&period;6&period;0-cdh5&period;14&period;0）

    kudu的架构体系 下图显示了一个具有三个 master 和多个 tablet server 的 Kudu 集群,每个服务器都支持多个 tablet.它说明了如何使用 Raft 共识来允许 maste ...

  7. Change Jenkins time zone

    修改Jenkins时区 Debian: vim /etc/defalut/jenkins JAVA_ARGS="-Dorg.apache.commons.jelly.tags.fmt.tim ...

  8. NET项目发布到IIS上报错：HTTP 错误 403&period;14

    NET项目发布到IIS上报错:HTTP 错误 404.0 - Not Found 原因:由于本机开发环境是Net4.5,所以虽然创建项目时选择的是net framework4.5的,但是webconf ...

  9. dede&colon;channel二级导航currentstyle属性失效问题

    dede:channel默认只作用在一级导航中,在调用下级导航(type='son')时,发现不起作用. 修改方法:修改 include/taglib/channel.lib.php 第133行.if ...

  10. 案例：Redis在京东的使用技术模型图

    http://www.100ec.cn  2013年09月27日17:30  中国电子商务研究中心 我要投稿 产品服务   (中国电子商务研究中心讯)Redis是一个开源的,遵守BSD许可协议的key ...

相关文章