这是一款 jQuery 和 CSS3 炫酷 3D 翻转侧边栏特效。该侧边栏特效中,当用户点击了触发按钮之后,整个页面会 3D 翻转一定的角度,同时显示侧边栏,效果非常炫酷。
侧边栏的 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>
该 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);
}
最后通过 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
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!