HTML5+CSS3卷角翻页导航菜单

代码说明

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

HTML代码

<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.codefans.net/">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>

代码演示