当前位置:首页 > 网页特效 > css样式 >

HTML5+CSS3卷角翻页导航菜单

时间:2014-04-10 08:41 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 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>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-css/7063.html

css样式下载排行

最新文章