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>