css3 menu 手机菜单1
首先看一下效果图;
效果1,主要是 translateY(100px) -->translateY(0px);opacity:0;—>opacity: 1; 然后递归延迟 怕麻烦也可以自己写个for循环
1 2 | .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; 然后递归延迟
1 2 | .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; 然后递归延迟
1 2 | .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 奇偶 判断; 然后递归延迟
1 2 3 | .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;} |
一下下是源代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 | <!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]> <![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> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步