这是一款jQuery和CSS3炫酷3D翻转侧边栏特效。该侧边栏特效中,当用户点击了触发按钮之后,整个页面会3D翻转一定的角度,同时显示侧边栏,效果非常炫酷。
使用方法
HTML结构
侧边栏的HTML结构如下:
<nav class="menu-activea"> <h1>打开侧边栏</h1> <ul> <li>首页</li> <li>栏目一</li> <li>联系我们</li> <li>关于我们</li> </ul> </nav>
作为打开侧边栏时,进行3D翻转的主体内容的HTML结构如下:
<main> <section> <!--这里放置你的页面内容--&t; </section> </main>
CSS样式
该jQuery和CSS3 3D翻转侧边栏的主要CSS样式如下:
nav, main { transition: -webkit-transform 150ms ease-out; transition: transform 150ms ease-out; transition: transform 150ms ease-out, -webkit-transform 150ms ease-out; } nav { z-index: 100; position: absolute; top: 0; left: 0; bottom: 0; width: 16em; background-color: #353441; -webkit-transform: translateX(-16em); transform: translateX(-16em); } nav.menu-active { -webkit-transform: translateX(0); transform: translateX(0); } nav.menu-hover { -webkit-transform: translateX(-15em); transform: translateX(-15em); } nav h1 { z-index: 100; display: block; position: absolute; top: 0; right: -60px; height: 60px; width: 60px; line-height: 60px; font-size: .8em; font-weight: 800; letter-spacing: 1px; color: #9DC6D1; text-transform: uppercase; text-align: center; background-color: #353441; cursor: pointer; } nav h1:hover { color: #353441; background: #fff; } nav ul { margin: 0; padding: 0; } nav li { display: inline-block; padding: 0 1em; width: 100%; height: 60px; color: #9DC6D1; line-height: 60px; background-color: #353441; } nav li:nth-of-type(2n) { background-color: #3a3947; } nav li:hover { background: #fff; } main { z-index: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; overflow: hidden; background-color: #9DC6D1; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } main:after { content: ''; display: block; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(33, 33, 45, 0.5)); visibility: hidden; opacity: 0; transition: opacity 150ms ease-out, visibility 0s 150ms; } main.menu-active { border-radius: .001px; -webkit-transform: translateX(16em) rotateY(15deg); transform: translateX(16em) rotateY(15deg); } main.menu-active:after { visibility: visible; opacity: 1; transition: opacity 150ms ease-out, visibility 0s; } main.menu-hover { border-radius: .001px; -webkit-transform: translateX(1em) rotateY(1deg); transform: translateX(1em) rotateY(1deg); } main section { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; padding: 1em 4em; max-width: 680px; overflow: auto; background-color: rgba(255, 255, 255, 0.5); }
JavaScript
最后通过jquery代码来控制侧边栏的隐藏和显示。
(function() { var nav = $('nav'), menu = $('nav h1'), main = $('main'), open = false, hover = false; menu.on('click', function() { open = !open ? true : false; nav.toggleClass('menu-active'); main.toggleClass('menu-active'); nav.removeClass('menu-hover'); main.removeClass('menu-hover'); console.log(open); }); menu.hover( function() { if (!open) { nav.addClass('menu-hover'); main.addClass('menu-hover'); } }, function() { nav.removeClass('menu-hover'); main.removeClass('menu-hover'); } ); })();
该jQuery和CSS3 3D翻转侧边栏特效的codepen地址为:https://codepen.io/jscottsmith/pen/KppGrE
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!