HTML5/CSS3卷边菜单效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3制作卷角菜单</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
<style>
ul,li{
	list-style-type:none;
	padding:0;
}
.form{
	width:405px;
	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="page">
<section class="demo">
    <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.shouce.ren">Contact</a></li>
        </ul>
      </div>	
</section>
</div>
<script>
(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>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5/CSS3卷边菜单效果

分类

CSS3

描述

HTML5+CSS3实现的卷边菜单，鼠标放在卷边上可拖动卷边改变大校下面简要说一下具体用到的CSS3属性：主要使用了border-radius来实现卷边，另外使用了gradient实现了导航菜单上的渐变效果，同时还使用了border绘制了向上的箭头，并给箭头添...