HTML5+CSS3實現的黑色卷角翻頁導航菜單_網頁代碼站(www.hbsxmp.com)

歡迎您來到網頁代碼站！設為首頁網頁代碼站分割線

網頁代碼站分割線

加入收藏

網頁代碼站分割線

網頁代碼站分割線

留言板

網頁代碼站分割線

精品美文

網頁代碼站分割線

網頁代碼站分割線

在線手冊

如果您關閉了瀏覽器的javascript，可能導致頁面部分功能無法顯示，請開啟javascript以便正常瀏覽本網頁。網頁代碼站(www.hbsxmp.com)謝謝您的支持！

熱搜:div

您的當前位置：網頁代碼站 >> 菜單導航 >> HTML5+CSS3實現的黑色卷角翻頁導航菜單

HTML5+CSS3實現的黑色卷角翻頁導航菜單

分類：菜單導航時間：2015-04-30 點擊：

關鍵詞：JS|網頁代碼|HTML5|CSS3|卷角|翻頁|

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5+CSS3實現的黑色卷角翻頁導航菜單_網頁代碼站(www.hbsxmp.com)</title>
<style type="text/css">
ul,li{
	list-style-type:none;
	padding:0;
}
.form{
	width:408px;
	height:200px;
	background:#2f2f2f;
	position:relative;
	overflow:hidden;
	margin:30px auto;
}
.corner{
	background:-webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);
	background:-moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	background:-o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	background:-ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	background:linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;
	width:90px;
	height:90px;
	border-radius:0 0 0px 90px / 0 0 0 30px;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	-ms-transform:rotate(-90deg);
	transform:rotate(-90deg);
	position:absolute;
	left:-4px;
	top:-4px;
	box-shadow:5px 2px 8px black;
	overflow:hidden;
	-webkit-transition:all 0.3s linear 0s;
	-moz-transition:all 0.3s linear 0s;
	-o-transition:all 0.3s linear 0s;
	-ms-transition:all 0.3s linear 0s;
	transition:all 0.3s linear 0s;
}
.corner:after{
	height:100%;
	width:100%;
	position:absolute;
	content:"";
	top:-15px;
	left:-82px;
	border-radius:90px 90px 0px 0 / 40px 40px 0 0;
	z-index:1;
	background:#2F2F2F;
	-webkit-transform:rotate(77deg);
	-moz-transform:rotate(77deg);
	-o-transform:rotate(77deg);
	-ms-transform:rotate(77deg);
	transform:rotate(77deg);
	box-shadow:0px 0px 8px black inset;
}
.button{
	float:left;
	height:40px;
	margin:20px 20px;
	border-radius:30px;
	border:1px solid #151515;
	box-shadow:0px 2px 2px rgba(0,0,0,0.6);
	overflow:hidden;
}
.button li {float:left;}
.button li a{
	float:left;
	display:block;
	text-decoration:none;
	padding:0 20px;
	height:40px;
	line-height:36px;
	font-size:14px;
	color:#eee;
	text-align:center;
	border-right:1px solid #151515;
	box-shadow:-1px 0px 0px rgba(255,255,255,0.1) inset,inset 0px -1px 1px rgba(200,200,200,0.1),inset 0px 1px 2px rgba(255,255,255,0.1);
	text-shadow:0px -1px 0px #000;
	background:-webkit-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-moz-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-o-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:-ms-linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
	background:linear-gradient(top,rgba(200,200,200,0.1) 0%,rgba(200,200,200,0.1) 50%,#222 50%,#222);
}
.button li:first-child a{border-radius:30px 0 0 30px;}
.button li:last-child a{border-radius:0px 30px 30px 0;border-right:none;}
.button li a:hover{
	cursor:pointer;
	background:-webkit-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-moz-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-o-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:-ms-linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	background:linear-gradient(top,rgba(50,50,50,0.4) 20%,rgba(100,100,100,0.3));
	box-shadow:0px 2px 4px rgba(0,0,0,0.8) inset;
	color:#b7def5;
	text-shadow:0px 0px 8px rgba(0,162,255,0.8);
}
.notice{
	position:relative;
	padding:10px 0 0 25px;
	margin:20px auto;
	width:120px;
}
.arrow{
	width:13px;
	height:20px;
	background:#FC9;
	position:absolute;
	top:0px;
	left:0px;
	-webkit-animation:notices linear 0.8s infinite ;
	-moz-animation:notices linear 0.8s infinite ;
	-o-animation:notices linear 0.8s infinite ;
	-ms-animation:notices linear 0.8s infinite ;
	animation:notices linear 0.8s infinite ;
}
.arrow:after{
	width:0;
	height:0;
	border-width:12px;
	border-style:solid dashed dashed dashed;
	border-color:#FC9 transparent transparent transparent;
	position:absolute;
	bottom:-22px;
	left:-5px;
	display:block;
	content:"";
}
@-webkit-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@-moz-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@-o-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@-ms-keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
@keyframes notices{
	0%{top:0px;}
	50%{top:10px;}
	100%{top:0px;}
}
</style>
</head>
<body>
<div class="notice"><div class="arrow"></div>拖動書角看看 *^_^*</div>
<div class="form" id="form">
	<div class="corner" id="corner"></div>
	<ul class="button">
		<li><a href="">Welcome</a></li>
		<li><a href="">Blog</a></li>
		<li class="navcurrent"><a href="">About Us</a></li>
		<li class="borderno"><a href="http://www.hbsxmp.com/">Contact</a></li>
	</ul>
</div>
<script type="text/javascript">
(function(){
	var form=document.getElementById("form");
	var corner=document.getElementById("corner")
	var ftop=form.offsetTop;
	var fleft=form.offsetLeft;
	var switchopen=0;
	corner.onmousedown=function(e){
		e.preventDefault();
        form.style.cursor="move";
		switchopen=1;
		}
	form.onmousemove=function(e){
		if(switchopen==1){
			if(e.pageX-fleft>90 ||e.pageY-ftop>90){
				corner.style.width=corner.style.height=90+"px";
				corner.style.left=corner.style.top=-4+"px"
				}
			else{
				corner.style.width=corner.style.height=e.pageY-ftop+"px";
				}
		}
	}
	form.onmouseup=function(){
		switchopen=0;
                this.style.cursor="default";
}
})()
</script>
<br>
<p><a href="http://www.hbsxmp.com">網頁代碼站</a> - 最專業的網頁代碼下載網站 - 致力為中國站長提供有質量的網頁代碼！</p>
</body>
</html>

運行代碼全選代碼復制代碼保存代碼友情提示

網頁代碼站代碼預覽圖片

HTML5+CSS3實現的黑色卷角翻頁導航菜單，用鼠標在卷邊處拖動，即可看到卷邊效果。注：若運行后效果失效，請確認使用IE9+/火狐、Chrome等瀏覽器，或者將代碼保存到本地文件內，比如123.html內，再用上述瀏覽器打開即可。

一、如果您使用的瀏覽器版本為IE6.0、360瀏覽器V3.0.8.1版本或者IE的更低版本瀏覽本頁面，建議您升級瀏覽器至IE7以上，上面的“運行”按鈕可能不能用，但您可按以下方式查看。
運行代碼方式：
1、點擊“復制”按鈕；
2、在桌面建立一個txt文檔；
3、粘貼復制的代碼；
4、最后把txt的擴展名改為“htm”或“html”；
5、完成，打開即可看到效果。

二、如果您使用FireFox或者非IE瀏覽器，建議您使用IE7以上版本。上面的“復制”按鈕失效，請您“全選”，以普通方式復制！

三、某些代碼因需加載完Jquery等之類比較大的JS文件，如果您看不到效果，請您刷新頁面！

四、某些代碼不能完全兼容各瀏覽器，還請您再次修改才能使用！給您帶來的不便！盡請諒解！謝謝您的支持！

上一篇：jQuery打造緩慢彈出下拉二級導航特效
下一篇：jquery打造一款很酷的頂部導航欄菜單

問問 | 貼吧 | 查詢 | 給我留言 | 精品美文 | 友情鏈接 | | 本站承接網站開發業務
版權聲明 | 廣告服務 | 聯系我們 | 網站地圖 | 關于我們 | | 滇ICP備08101440號
Powered by 網頁代碼站(網頁即"web" + 代碼即"dm" + "cn" = webdm.cn) | 最專業的代碼下載網站 - 致力為中國站長提供高質量的代碼！

滇公網安備 53032202100002號

精品久久久久久久中文字幕