- HTML5+CSS3实现的黑色卷角翻页导航菜单，用鼠标在卷边处拖动，即可看到卷边效果。注：若运行后效果失效，请确认使用IE9+/火狐、Chrome等浏览器，或者将代码保存到本地文件内，比如123.html内，再用上述浏览器打开即可。
-
<!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>CSS3实现黑色卷角翻页导航条</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.codesocang.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></body></html>
标签：网站源码