HTML5/CSS3卷边菜单效果

2024-09-05 12:19:00

字体：大中小

来源：转载

供稿：网友

HTML5+CSS3实现的卷边菜单，鼠标放在卷边上可拖动卷边改变大校下面简要说一下具体用到的CSS3属性：主要使用了border-radius来实现卷边，另外使用了gradient实现了导航菜单上的渐变效果，同时还使用了border绘制了向上的箭头，并给箭头添加了css3动画效果。你可通过本CSS3特效学习到一些相关的技巧。

<!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>Welcome</li>          <li>Blog</li>          <li class="navcurrent">About Us</li>          <li class="borderno">Contact</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>

上一篇：CSS3实现有立体感的登录表单效果

下一篇：CSS3翻书Book效果