Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Home
Portfolio
About
Contact
Home Page
Portfolio Page
about Page
contact Page
blog Page
article Page
css
body { font-family: "Open Sans", sans-serif; font-weight: 300 } ul { list-style: none; padding: 0; margin: 0 } li { list-style: none } .inline-block { display: inline-block } .act-table { display: table } .act-table-cell { display: table-cell } a, a:hover, a:focus, a:active { text-decoration: none; color: inherit } .text-center { text-align: center } .text-left { text-align: left } .text-right { text-align: right } .pull-right { float: right } .pull-left { float: left } .ver-middle { vertical-align: middle } header { position: fixed; top: 8px; left: 0; right: 0; z-index: 100; transition: 1s; -webkit-transition: 1s; -moz-transition: 1s } header.go-out { top: -150px } header nav ul { background-color: rgba(255, 255, 255, 0.2); overflow: hidden; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px } header nav ul li { color: #fff } header nav ul li a { width: 100px; max-width: 150px; height: 32px; display: block; padding-top: 13px } header nav ul li.active a, header nav ul li.active a:hover { background-color: rgba(255, 255, 255, 0.2) } header nav ul li:hover a { background-color: rgba(255, 255, 255, 0.1) } .page { background-color: rgba(0, 0, 0, 0.2) } .page .act-table { width: 100%; height: 100% } .page .act-table .act-table-cell { font-size: 100px; font-weight: 500; color: #fff } .page.active { z-index: 50 } #wrap { position: fixed; top: 0; bottom: 0; right: 0; left: 0; transition: .8s; -webkit-transition: .8s; -moz-transition: .8s } #wrap.active { top: 10%; bottom: 10%; right: 10%; left: 10% } .cube { position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s } .cube.reverse-back { transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg); -webkit-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg); -moz-transform: rotateX(180deg) rotateY(0deg) rotateZ(-180deg) } .cube.reverse-back .back { transform: translateZ(-800px) rotateY(-180deg); -webkit-transform: translateZ(-800px) rotateY(-180deg); -moz-transform: translateZ(-800px) rotateY(-180deg) } .cube.reverse-left .left { transform: translateX(-800px) rotateY(-90deg); -webkit-transform: translateX(-800px) rotateY(-90deg); -moz-transform: translateX(-800px) rotateY(-90deg) } .cube.reverse-right { transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg); -webkit-transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg); -moz-transform: rotateX(0deg) rotateY(270deg) rotateZ(0deg) } .cube.reverse-right .right { transform: translateX(800px) rotateY(90deg); -webkit-transform: translateX(800px) rotateY(90deg); -moz-transform: translateX(800px) rotateY(90deg) } .cube.reverse-top { transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) } .cube.reverse-top .top { transform: translateY(-400px) rotateX(90deg); -webkit-transform: translateY(-400px) rotateX(90deg); -moz-transform: translateY(-400px) rotateX(90deg) } .cube.reverse-bottom .bottom { transform: translateY(400px) rotateX(-90deg); -webkit-transform: translateY(400px) rotateX(-90deg); -moz-transform: translateY(400px) rotateX(-90deg) } .face { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; color: #666; font-size: 18px; text-align: center; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5) } .front { background-color: #28aadc } .front.active { transform: translateZ(800px); -webkit-transform: translateZ(800px); -moz-transform: translateZ(800px) } .back { background-color: #ff3366 } .back:not(.active) { transform: translateZ(-800px) rotateY(-180deg); -webkit-transform: translateZ(-800px) rotateY(-180deg); -moz-transform: translateZ(-800px) rotateY(-180deg) } .back .active { transform: translateZ(800px); -webkit-transform: translateZ(800px); -moz-transform: translateZ(800px) } .left:not(.active) { transform: translateX(-800px) rotateY(-90deg); -webkit-transform: translateX(-800px) rotateY(-90deg); -moz-transform: translateX(-800px) rotateY(-90deg) } .left .active { transform: translateZ(800px); -webkit-transform: translateZ(800px); -moz-transform: translateZ(800px) } .right { background-color: #000 } .right:not(.active) { transform: translateX(800px) rotateY(90deg); -webkit-transform: translateX(800px) rotateY(90deg); -moz-transform: translateX(800px) rotateY(90deg) } .right .active { transform: translateZ(800px); -webkit-transform: translateZ(800px); -moz-transform: translateZ(800px) } .top { background-color: #FFAD33 } .top:not(.active) { transform: translateY(-400px) rotateX(90deg); -webkit-transform: translateY(-400px) rotateX(90deg); -moz-transform: translateY(-400px) rotateX(90deg) } .top .active { transform: translateZ(800px); -webkit-transform: translateZ(800px); -moz-transform: translateZ(800px) } .bottom:not(.active) { transform: translateY(400px) rotateX(-90deg); -webkit-transform: translateY(400px) rotateX(-90deg); -moz-transform: translateY(400px) rotateX(-90deg) } .bottom .active { transform: translateZ(800px); -webkit-transform: translateZ(800px); -moz-transform: translateZ(800px) }
JavaScript
(function(document, window, $){ $(document).ready(function(){ // Variables var windowWidth = $(window).width(), windowHeight = $(window).height(), $header = $('header'); // header anchor tags function headerAnchors(){ var pageDirection = ''; var thisElement; var timeout; $header.find('nav li a').click(function(event){ event.preventDefault(); $('.cube').removeClass('reverse-' + pageDirection); thisElement = $(this); pageDirection = thisElement.data('direction'); reverseDirection = thisElement.data('reverse-direction'); thisElement.parent().addClass('active').siblings().removeClass('active'); $('.cube').addClass('reverse-' + pageDirection); $header.addClass('go-out'); $('#wrap').addClass('active'); clearTimeout(timeout); timeout = setTimeout(function(){ $header.removeClass('go-out'); $('#wrap').removeClass('active'); }, 1000); }); }headerAnchors(); $(window).resize(function(){ // Vars windowWidth = $(window).width(); windowHeight = $(window).height(); // Functions }); }); })(document, window, jQuery);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多维数据集页面导航样式-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号