经验分享程序开发文档资料数据资源其它资源

html5顶部导航3D翻转展开特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5顶部导航3D翻转展开特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

html5顶部导航3D翻转展开特效代码

HTML代码(index.html):

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<title>html5顶部导航3D翻转展开特效</title>

</head>
<body>
	<header class="cd-header">
		<a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
		<a href="#0" class="cd-3d-nav-trigger">
			Menu
			<span></span>
		</a>
	</header> <!-- .cd-header -->
	
	<main>
		<h1>3D Rotating Navigation</h1>
		<!-- all your content here -->
	</main>
	
	<nav class="cd-3d-nav-container">
		<ul class="cd-3d-nav">
			<li class="cd-selected">
				<a href="#0">Dashboard</a>
			</li>

			<li>
				<a href="#0">Projects</a>
			</li>

			<li>
				<a href="#0">Images</a>
			</li>

			<li>
				<a href="#0">Settings</a>
			</li>

			<li>
				<a href="#0">New</a>
			</li>
		</ul>
		<span class="cd-marker color-1"></span>	
	</nav>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	//toggle 3d navigation$('.cd-3d-nav-trigger').on('click',function(){
	toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
}
);
	//select a new item from the 3d navigation$('.cd-3d-nav a').on('click',function(){
	var selected = $(this);
	selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
	updateSelectedNav('close');
}
);
	$(window).on('resize',function(){
	window.requestAnimationFrame(updateSelectedNav);
}
);
	function toggle3dBlock(addOrRemove){
	if(typeof(addOrRemove)==='undefined') addOrRemove = true;
	$('.cd-header').toggleClass('nav-is-visible',addOrRemove);
	$('main').toggleClass('nav-is-visible',addOrRemove);
	$('.cd-3d-nav-container').toggleClass('nav-is-visible',addOrRemove);
}
//this function update the .cd-marker positionfunction updateSelectedNav(type){
	var selectedItem = $('.cd-selected'),selectedItemPosition = selectedItem.index() + 1,leftPosition = selectedItem.offset().left,backgroundColor = selectedItem.data('color');
	$('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
	'left':leftPosition,}
);
	if( type == 'close'){
	$('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	toggle3dBlock(false);
}
);
}
}
$.fn.removeClassPrefix = function(prefix){
	this.each(function(i,el){
	var classes = el.className.split(" ").filter(function(c){
	return c.lastIndexOf(prefix,0) !== 0;
}
);
	el.className = $.trim(classes.join(" "));
}
);
	return this;
}
;
}
);

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Open Sans",sans-serif;background-color:#485274;}
a{text-decoration:none;}
/* --------------------------------Main Components-------------------------------- */
.cd-header{height:80px;width:90%;margin:0 auto;-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;transition:transform 0.5s;/* Force Hardware Acceleration in WebKit */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-header:after{content:"";display:table;clear:both;}
.cd-header.nav-is-visible{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-ms-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);}
@media only screen and (min-width:768px){.cd-header.nav-is-visible{-webkit-transform:translateY(170px);-moz-transform:translateY(170px);-ms-transform:translateY(170px);-o-transform:translateY(170px);transform:translateY(170px);}
}
.cd-logo{float:left;margin-top:28px;}
.cd-3d-nav-trigger{position:relative;float:right;height:45px;width:45px;margin-top:18px;/* replace text with background image */
 overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;}
.cd-3d-nav-trigger span,.cd-3d-nav-trigger span::before,.cd-3d-nav-trigger span::after{/* hamburger icon in CSS */
 position:absolute;width:28px;height:3px;background-color:#FFF;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-3d-nav-trigger span{/* this is the central line */
 top:21px;left:8px;-webkit-transition:background 0.2s 0.5s;-moz-transition:background 0.2s 0.5s;transition:background 0.2s 0.5s;}
.cd-3d-nav-trigger span::before,.cd-3d-nav-trigger span:after{/* these are the upper and lower lines */
 content:'';left:0;-webkit-transition:-webkit-transform 0.2s 0.5s;-moz-transition:-moz-transform 0.2s 0.5s;transition:transform 0.2s 0.5s;}
.cd-3d-nav-trigger span::before{bottom:8px;}
.cd-3d-nav-trigger span::after{top:8px;}
.nav-is-visible .cd-3d-nav-trigger span{/* hide line in the center */
 background-color:rgba(255,255,255,0);}
.nav-is-visible .cd-3d-nav-trigger span::before,.nav-is-visible .cd-3d-nav-trigger span::after{/* keep visible other 2 lines */
 background-color:white;}
.nav-is-visible .cd-3d-nav-trigger span::before{-webkit-transform:translateY(8px) rotate(-45deg);-moz-transform:translateY(8px) rotate(-45deg);-ms-transform:translateY(8px) rotate(-45deg);-o-transform:translateY(8px) rotate(-45deg);transform:translateY(8px) rotate(-45deg);}
.nav-is-visible .cd-3d-nav-trigger span::after{-webkit-transform:translateY(-8px) rotate(45deg);-moz-transform:translateY(-8px) rotate(45deg);-ms-transform:translateY(-8px) rotate(45deg);-o-transform:translateY(-8px) rotate(45deg);transform:translateY(-8px) rotate(45deg);}
.cd-3d-nav-container{/* this is the 3D navigation container */
 position:fixed;top:0;left:0;height:80px;width:100%;background-color:#000000;visibility:hidden;/* enable a 3D-space for children elements */
 -webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:-webkit-transform 0.5s 0s,visibility 0s 0.5s;-moz-transition:-moz-transform 0.5s 0s,visibility 0s 0.5s;transition:transform 0.5s 0s,visibility 0s 0.5s;}
.cd-3d-nav-container.nav-is-visible{visibility:visible;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 0.5s 0s,visibility 0.5s 0s;-moz-transition:-moz-transform 0.5s 0s,visibility 0.5s 0s;transition:transform 0.5s 0s,visibility 0.5s 0s;}
@media only screen and (min-width:768px){.cd-3d-nav-container{height:170px;}
}
.cd-3d-nav{/* this is the 3D rotating navigation */
 position:relative;height:100%;background-color:#343c55;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);-ms-transform:rotateX(90deg);-o-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;transition:transform 0.5s;}
.cd-3d-nav::after{/* menu dark cover layer - to enhance perspective effect */
 content:'';position:absolute;top:0;left:0;height:100%;width:100%;background-color:#000000;opacity:1;visibility:visible;-webkit-transition:opacity 0.5s 0s,visibility 0.5s 0s;-moz-transition:opacity 0.5s 0s,visibility 0.5s 0s;transition:opacity 0.5s 0s,visibility 0.5s 0s;}
.cd-3d-nav li{height:100%;width:20%;float:left;}
.cd-3d-nav li:first-of-type a::before{background-image:url(../img/icon-1.svg);}
.cd-3d-nav li:nth-of-type(2) a::before{background-image:url(../img/icon-2.svg);}
.cd-3d-nav li:nth-of-type(3) a::before{background-image:url(../img/icon-3.svg);}
.cd-3d-nav li:nth-of-type(4) a::before{background-image:url(../img/icon-4.svg);}
.cd-3d-nav li:nth-of-type(5) a::before{background-image:url(../img/icon-5.svg);}
.cd-3d-nav a{position:relative;display:block;height:100%;color:transparent;-webkit-transition:background-color 0.2s;-moz-transition:background-color 0.2s;transition:background-color 0.2s;}
.cd-3d-nav a::before{/* navigation icons */
 content:'';height:32px;width:32px;position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);background-size:32px 64px;background-repeat:no-repeat;background-position:0 0;}
.no-touch .cd-3d-nav a:hover{background-color:#2b3145;}
.cd-3d-nav .cd-selected a{background-color:#212635;}
.no-touch .cd-3d-nav .cd-selected a:hover{background-color:#212635;}
.cd-3d-nav .cd-selected a::before{background-position:0 -32px;}
.nav-is-visible .cd-3d-nav{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);}
.nav-is-visible .cd-3d-nav::after{/* menu cover layer - hide it when navigation is visible */
 opacity:0;visibility:hidden;-webkit-transition:opacity 0.5s 0s,visibility 0s 0.5s;-moz-transition:opacity 0.5s 0s,visibility 0s 0.5s;transition:opacity 0.5s 0s,visibility 0s 0.5s;}
@media only screen and (min-width:768px){.cd-3d-nav a{padding:7.6em 1em 0;color:#ffffff;font-size:1.3rem;font-weight:600;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;/* truncate text with ellipsis if too long */
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cd-3d-nav a::before{top:4.4em;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
}
.cd-marker{/* line at the bottom of nav selected item */
 position:absolute;bottom:0;left:0;height:3px;width:20%;background-color:currentColor;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;-ms-transform-origin:center bottom;-o-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:translateZ(0) rotateX(90deg);-moz-transform:translateZ(0) rotateX(90deg);-ms-transform:translateZ(0) rotateX(90deg);-o-transform:translateZ(0) rotateX(90deg);transform:translateZ(0) rotateX(90deg);-webkit-transition:-webkit-transform 0.5s,left 0.5s,color 0.5s,background-color 0.5s;-moz-transition:-moz-transform 0.5s,left 0.5s,color 0.5s,background-color 0.5s;transition:transform 0.5s,left 0.5s,color 0.5s,background-color 0.5s;}
.cd-marker::before{/* triangle at the bottom of nav selected item */
 content:'';position:absolute;bottom:3px;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);height:0;width:0;border:10px solid transparent;border-bottom-color:inherit;}
.nav-is-visible .cd-marker{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);}
/* these are the colors of the markers - line + arrow */
.color-1{color:#9a57bd;}
.color-2{color:#c96aa4;}
.color-3{color:#d6915e;}
.color-4{color:#5397c7;}
.color-5{color:#77cd91;}
main{-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;transition:transform 0.5s;/* Force Hardware Acceleration in WebKit */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
main h1{text-align:center;font-size:2.4rem;font-weight:300;color:#ffffff;margin:2em auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
main.nav-is-visible{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-ms-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);}
@media only screen and (min-width:768px){main.nav-is-visible{-webkit-transform:translateY(170px);-moz-transform:translateY(170px);-ms-transform:translateY(170px);-o-transform:translateY(170px);transform:translateY(170px);}
main h1{font-size:3.6rem;margin:4em auto;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
44.26 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
44.26 KB
立即下载
颜黛翠
了解
打赏作者 鼓励作者
Html Js 菜单导航特效6
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章