云栖问答

找不到答案?去提问题

css 2016-06-13 16:53:18

设置3D动画之后表单和链接都不能点了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
        <style>
            *{
    margin: 0;
    padding: 0;
    border: none;
}
.load_button{
    position: absolute;
    top: 200px;
    right: 70px;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.6);
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: "微软雅黑";
}
.box{
    position: relative;
    width: 370px;
    height: 480px;
    margin: 200px auto;
    z-index: 2;
    border: 1px solid black;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -webkit-perspective: 900;
}
.move_box{
    position: absolute;
    top: 49px;
    left: -1px;
    border: 1px solid black;
    width: 370px;
    height: 430px;
    backface-visibility: hidden;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    z-index: 10000;
}
ul{
    list-style: none;
    position: absolute;
    overflow: hidden;
    width: 370px;
    height: 50px;
    top: -1px;
    left: -1px;
    border: 1px solid black;
    z-index: 3;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}
.select{
    float: left;
    width: 185px;
    height: 50px;
    background-color: white;
    color: black;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    font-family: "微软雅黑";
    z-index: 5;
    cursor:pointer;
}
.not_select{
    float: left;
    width: 185px;
    height: 50px;
    background-color: rgb(228,228,228);
    color: rgb(153,153,153);
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    font-family: "微软雅黑";
    z-index: 5;
    cursor:pointer;
}
move_bar{
    position: absolute;
    left: 0px;
    top: 41px;
    width: 186px;
    height: 10px;
    z-index: 10;
    background-color: blue;
}
#load{
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid black;
    width: 370px;
    height: 430px;
    background-color: white;
    backface-visibility: hidden;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
#load img{
    position: absolute;
    left: 100px;
    top: 30px;
    width: 160px;
    height: 160px;
}
#load p{
    position: absolute;
    left: 20px;
    top: 230px;
    font-size: 18px;
    font-family: "微软雅黑";
}
#load_name{
    position: absolute;
    top: 225px;
    left: 90px;
    width: 232px;
    height: 35px;
    border: 1px solid black;
    font-size: 20px;
    line-height: 35px;
    padding: 0 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
#load span{
    position: absolute;
    left: 20px;
    top: 290px;
    font-size: 18px;
    font-family: "微软雅黑";
}
#load_password{
    position: absolute;
    top: 285px;
    left: 90px;
    width: 232px;
    height: 35px;
    border: 1px solid black;
    font-size: 30px;
    line-height: 35px;
    padding: 0 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
load_sub{
    position: absolute;
    top: 355px;
    left: 135px;
    width: 100px;
    height: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background-image: -moz-linear-gradient(top, #F2F2F2, #A7A7A7); /* Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, F2F2F2), color-stop(1, #A7A7A7)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A7A7A7', GradientType='0'); /* IE*/
    border: 1px solid black;
    text-shadow: 2px 2px 2px white;
    font-size: 15px;
}
.sign{
    transform: rotateY(180deg);
    position: absolute;
    top: -1px;
    left: -1px;
    border: 1px solid black;
    width: 370px;
    height: 430px;
    z-index: 10;
    background-color: white;
    backface-visibility: hidden;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
h1{
    position: absolute;
    left: 20px;
    top: 37px;
    font-size: 18px;
    font-family: "微软雅黑";
}
h2{
    position: absolute;
    left: 20px;
    top: 102px;
    font-size: 18px;
    font-family: "微软雅黑";
}
h3{
    position: absolute;
    left: 20px;
    top: 170px;
    font-size: 18px;
    font-family: "微软雅黑";
}
h4{
    position: absolute;
    left: 20px;
    top: 236px;
    font-size: 18px;
    font-family: "微软雅黑";
}
h5{
    position: absolute;
    left: 20px;
    top: 304px;
    font-size: 18px;
    font-family: "微软雅黑";
}
.sign input{
    width: 242px;
    height: 35px;
    margin: 30.5px 0 0 105px;
    border: 1px solid black;
    z-index: 10;
}
.sign form input{
    position: absolute;
    margin: 0;
    top: 350px;
    left: 62px;
    height: 15px;
    width: 15px;
    
}
.sign span{
    position: absolute;
    left: 79px;
    top: 350px;
    font-size: 13px;
}
agree{
    position: absolute;
    left: 50px;
    top: 350px;
    width: 15px;
    height: 15px;
}
sign_sub{
    position: absolute;
    top: 380px;
    left: 135px;
    margin: 0 !important;
    width: 100px !important;
    height: 30px !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background-image: -moz-linear-gradient(top, #F2F2F2, #A7A7A7); /* Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(1, #A7A7A7)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A7A7A7', GradientType='0'); /* IE*/
    border: 1px solid black;
    text-shadow: 2px 2px 2px white;
    font-size: 15px;
    
}
.signnew{
    position: absolute;
    top: 49px;
    left: -1px;
    border: 1px solid black;
    width: 370px;
    height: 430px;
    z-index: 15;
    background-color: white;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
.signnew input{
    width: 242px;
    height: 35px;
    margin: 30.5px 0 0 105px;
    border: 1px solid black;
    z-index: 15;
}
.signnew form input{
    position: absolute;
    margin: 0;
    top: 350px;
    left: 62px;
    height: 15px;
    width: 15px;
    
}
.signnew span{
    position: absolute;
    left: 79px;
    top: 350px;
    font-size: 13px;
}
agree{
    position: absolute;
    left: 50px;
    top: 350px;
    width: 15px;
    height: 15px;
    z-index: 15;
}
sign_sub{
    position: absolute;
    top: 380px;
    left: 135px;
    margin: 0 !important;
    width: 100px !important;
    height: 30px !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background-image: -moz-linear-gradient(top, #F2F2F2, #A7A7A7); /* Firefox */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, F2F2F2), color-stop(1, #A7A7A7)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A7A7A7', GradientType='0'); /* IE*/
    border: 1px solid black;
    text-shadow: 2px 2px 2px white;
    font-size: 15px;
    z-index: 15;
}
        </style>
        <script>
            window.onload = function(){
                var box = document.getElementById('box');
                var move_box = document.getElementById('move_box')
                var load_but = document.getElementById('select');
                var sign_but = document.getElementById('not_select');
                var degnum = 0;
                var move_bar = document.getElementById('move_bar');
                var sign = document.getElementById('sign');
                var sign2 = document.getElementById('sign2');
                var timer = null;
                load_but.onclick = function(){
                    clearInterval(timer);
                    timer = setInterval(function(){
                        if(degnum>0){
                            degnum -= 2;
                            move_box.style['transform'] = 'rotateY(' + degnum + 'deg)';
                        }
                        else{
                            clearInterval(timer);
                        }
                    },1)
                    var timebar = null;
                    timebar = setTimeout(function(){
                        bar_move(0);
                    },100)
                    //box.remove(sign2);
                }
                sign_but.onclick = function(){
                    clearInterval(timer);
                    timer = setInterval(function(){
                        if(degnum<180){
                            degnum += 2;
                            move_box.style['transform'] = 'rotateY(' + degnum + 'deg)';
                        }
                        else{
                            clearInterval(timer);
                        }
                    },1)
                    var timebar = null;
                    timebar = setTimeout(function(){
                        bar_move(185);
                    },100)
                    var t = null;
                    t = setTimeout(function(){
                        signnew = sign.cloneNode(true);
                        signnew.className = "signnew";
                        var sign2 = box.appendChild(signnew);
                    },300)
                    
                    //sign2.innerHTML = sign.innerHTML;
                }
            }
            var timemovebar = null;
            clearInterval(timemovebar);
            function bar_move(target){
                
                if(move_bar.offsetLeft==target){
                    clearInterval(timemovebar);
                }else{
                    timemoverbar = setInterval(function(){
                        var speed = (target - move_bar.offsetLeft)/10;
                        speed = speed<0?Math.floor(speed):Math.ceil(speed);
                        move_bar.style['left']=move_bar.offsetLeft+speed+'px';
                    },10)
                }
            }
        </script>
    </head>
    <body>
        <p class="load_button" id="load_button">登录</p>
        <div class="box" id="box">
            <ul>
                <li class="select" id="select" >登录</li>
                <li class="not_select" id="not_select">注册</li>
            </ul>
            <div id="move_bar"></div>
            <div class="move_box" id="move_box">
                <div id="load" >
                <img src="img/雷途最新LOGO200_200.png"/>
                    <p>用户名</p>
                    <input type="text" value="" name="load_name" id="load_name"/>
                    <span>密&nbsp;&nbsp;&nbsp; 码</span>
                    <input type="password" value="" name="load_password" id="load_password"/>
                    <input type="submit" name="load_sub" id="load_sub" value="登录" />
                </div>
                <div id="sign" class="sign">
                    <h1>用 户 名</h1>
                    <input type="text" value="" name="sign_name" />
                    <h2>电话号码</h2>
                    <input type="tel" value="" name="phone" />
                    <h3>e - mail</h3>
                    <input type="email" value="" name="mail" />
                    <h4>登录密码</h4>
                    <input type="password" value="" name="sign_password" />
                    <h5>确认密码</h5>
                    <input type="password" value="" name="do_password" />
                    <form>
                        <input type="radio" name="agree" id="agree" value="" />
                    </form>
                    <span>确认已阅读<a href="#">《雷途网相关规定》</a>并同意</span>
                    <input type="submit" name="sign_sub" id="sign_sub" value="注册" />
                </div>
            </div>
        </div>
    </body>
</html>

4个回答

0

1006210490302870

😬

0

1756399741704119

层级问题,1510823556_1_ 你在看看你的代码

0

1756399741704119

表单被遮盖住了

0

1584122285926967

Y

1
GO