CSS3过渡并不像我想的那样流畅

时间：2013-09-16 18:49:15

标签： html css3 animation

好吧，我正在尝试用启动动画制作一个菜单。我把过渡：保证金和所有元素都有位置：relative＆amp; float：left ...但是当我一个接一个地发送它们时，立方体会产生奇怪的动作o.O 

<style>
#submenu1{
    position: absolute;
    width:100%;
    height:0px;
    z-index: 9999;
    background-image: url("inc/ima/submenuBackground.jpg");
    -webkit-transition: height 1s ease;
       -moz-transition: height 1s ease;
         -o-transition: height 1s ease;
            transition: height 1s ease;
}
#submenu2{
    width:100%;
    height: 0px;
    align: center;
    valign: middle;
    z-index: 9999;
    background: url('inc/ima/fasideLinea.png');
    background-repeat: repeat-x;
    background-position: bottom;
    -webkit-transition: height 1s ease;
       -moz-transition: height 1s ease;
         -o-transition: height 1s ease;
            transition: height 1s ease;
}
#oscuro{
    width: 0;
    height: 0;
    z-index: 1000;
    position: absolute;
    background-color: #000000;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
       -moz-transition: opacity 1s ease;
         -o-transition: opacity 1s ease;
            transition: opacity 1s ease;
}
#options {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 298px;
    top: 150px;
    z-index: 99999999;
}
#DcontenidoSubmenu{
    visibility: hidden;
    width: 100%;
    height: 257px;
    top: 30px;
    position: absolute;
    overflow: hidden;
    z-index: 99999999;
    border: 1px solid red;
    -webkit-perspective: 1200px;
       -moz-perspective: 1200px;
         -o-perspective: 1200px;
            perspective: 1200px;

}
#DcontenidoSubmenu2{
    visibility: hidden;
    width: 100%;
    height: 257px;
    top: 30px;
    position: absolute;
    overflow: hidden;
    z-index: 99999999;
    border: 1px solid red;
    -webkit-perspective: 1200px;
       -moz-perspective: 1200px;
         -o-perspective: 1200px;
            perspective: 1200px;

}
.boxClass1{
    height: 35px;
    border: 2px solid red;
    position: absolute;
    float: left;
}
.boxClass2{
    height: 35px;
    border: 2px solid red;
    position: absolute;
    float: left;
    -webkit-transition: margin 3s ease 0s;
       -moz-transition: margin 3s ease 0s;
         -o-transition: margin 3s ease 0s;
            transition: margin 3s ease 0s;
}
.boxClass3{
    height: 35px;
    border: 2px solid red;
    margin-top: 10px;
    margin-left: 20px;
    position: relative;
    float: left;
}
.container{
    width: 220px;
    height: 35px;
    position: relative;
    margin: 50px;
    -webkit-perspective: 1200px;
       -moz-perspective: 1200px;
         -o-perspective: 1200px;
            perspective: 1200px;
}
.boxContenedor{
    width: 100%;
    height: 100%;
    position: absolute;
}
.cuboSubmenu{
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
         -o-transition: -o-transform 1s;
            transition: transform 1s;
    -webkit-transform: translateZ(  -50px );
       -moz-transform: translateZ(  -50px );
         -o-transform: translateZ(  -50px );
            transform: translateZ(  -50px );
}
.cuboSubmenu figure{
    border: 2px solid black;
    color: white;
    display: block;
    font-size: 15px;
    font-weight: bold;
    line-height: 35px;
    margin: 0;
    position: absolute;
    text-align: center;
}
.cuboSubmenu .front, .cuboSubmenu .back{
    width: 220px;
    height: 35px;
}
.cuboSubmenu .right, .cuboSubmenu .left{
    width: 35px;
    height: 35px;
    left: 100px;
}
.cuboSubmenu .top, .cuboSubmenu .bottom{
    width: 220px;
    height: 35px;
    top: 50px;
    line-height: 35px;
}
.cuboSubmenu .front{
    background: hsla( 000, 100%, 50%, 0.7 );
}
.cuboSubmenu .back{
    background: hsla( 160, 100%, 50%, 0.7 );
}
.cuboSubmenu .righ{
    background: hsla( 120, 100%, 50%, 0.7 );
}
.cuboSubmenu .left{
    background: hsla( 180, 100%, 50%, 0.7 );
}
.cuboSubmenu .top{
    background: hsla( 240, 100%, 50%, 0.7 );
}
.cuboSubmenu .bottom{
    background: hsla( 300, 100%, 50%, 0.7 );
}
.cuboSubmenu .front{
    -webkit-transform: translateZ( 19px );
       -moz-transform: translateZ( 19px );
         -o-transform: translateZ( 19px );
            transform: translateZ( 19px );
}
.cuboSubmenu .back{
    -webkit-transform: rotateX( -180deg ) translateZ(  19px );
       -moz-transform: rotateX( -180deg ) translateZ(  19px );
         -o-transform: rotateX( -180deg ) translateZ(  19px );
            transform: rotateX( -180deg ) translateZ(  19px );
}
.cuboSubmenu .right {
    -webkit-transform: rotateY(   90deg ) translateZ( 104px );
       -moz-transform: rotateY(   90deg ) translateZ( 104px );
         -o-transform: rotateY(   90deg ) translateZ( 104px );
            transform: rotateY(   90deg ) translateZ( 104px );
}
.cuboSubmenu .left {
    -webkit-transform: rotateY(  -90deg ) translateZ( 119px );
       -moz-transform: rotateY(  -90deg ) translateZ( 119px );
         -o-transform: rotateY(  -90deg ) translateZ( 119px );
            transform: rotateY(  -90deg ) translateZ( 119px );
}
.cuboSubmenu .top {
    -webkit-transform: rotateX(   90deg ) translateZ( 68px );
       -moz-transform: rotateX(   90deg ) translateZ( 68px );
         -o-transform: rotateX(   90deg ) translateZ( 68px );
            transform: rotateX(   90deg ) translateZ( 68px );
}
.cuboSubmenu .bottom {
    -webkit-transform: rotateX(  -90deg ) translateZ( -31px );
       -moz-transform: rotateX(  -90deg ) translateZ( -31px );
         -o-transform: rotateX(  -90deg ) translateZ( -31px );
            transform: rotateX(  -90deg ) translateZ( -31px );
}
@keyframes AoverNav {
    from{top: -2px;}
    to{top: 23px;}
}
@-webkit-keyframes AoverNav {
    from{top: -2px;}
    to{top: 23px;}
}

#TRnav{
    width: 100%;
    height: 43px;
    background-color: hsl(200, 100%, 20.8%);
}
#TDnav{
    width: 100%;
    height: 43px;
    align: center;
    valign: middle;
    border-bottom: solid 1px hsl(204, 100%, 12.9%);
}
nav {
    width: 994px;
    height: 30px;
    margin: 0px auto 0px auto;
}
    nav ul{
        list-style: none;
        position: relative; float: left;
    }
    nav ul li{
        min-width: 80px;
        height: 26px;
        line-height: 15px;
        text-align: center;
        position: relative; float: left;
        margin-right: 4px;
        z-index: 999;
        border-style: solid;
        border-width: 2px;
        -webkit-border-image: url(ima/fondo_botones_nav.png) 2 fill stretch;
        border-image: url('ima/fondo_botones_nav.png') 2 fill stretch;
        -webkit-transition: -webkit-transform .4s .1s linear;
        -webkit-transition: -webkit-transform .4s .1s linear;
        transition: -ms-transform .4s .1s linear;
        transition: -webkit-transform .4s .1s linear;
        transition: transform .4s .1s linear;
    }
    nav ul li:hover{
        -webkit-transform: scale(1.4);
            -ms-transform: scale(1.4);
                transform: scale(1.4);
        z-index: 9999;
    }
    nav ul li a{
        color: #e6eaed;
        padding: 2px 9px 0px 9px;
        display: block;
        font-size: 0.82em;
        text-decoration: none;
        line-height: 25px ;
        -webkit-transition: color .2s .1s ease-out;
        transition: color .2s .1s ease-out;
    }
    nav ul li a:hover{
        color: hsl(200, 85%, 43.7%);
    }
    nav ul li div{
        position: relative;
        top: -7px;
    }
    nav ul li .luz{
        width: 100%;
        height: 7px;
        position: relative;
        top: -2px;

        background: radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
        background: -webkit-radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
    }
    nav ul li .luzhover{
        width: 100%;
        height: 7px;
        position: relative;
        top: -2px;

        background: radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
        background: -webkit-radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
        -webkit-animation: AoverNav .8s forwards .2s;
        animation: AoverNav .8s forwards .2s;
    }

</style>

<script type="text/javascript">
var cursorX;
var cursorY;
var checkInterval;
var submenuOpen = false;
var recentMove = false;
var mouseOverMenuItm = false;
var VboxToMove = 0;
var VtimeoutID = 0;
function FabrirMenu(did,nivel){
    if (mouseOverMenuItm){
        document.getElementById('DcontenidoSubmenu').style.visibility = "";
        setTimeout("FeffectosAbrirMenu();", 100);
        submenuOpen = true;
    }
}
function FeffectosAbrirMenu(){
    /*var ediv = document.getElementById("DdivLog");
    ediv.style.top = '0px';
    ediv.style.height = document.getElementById("Tbody").clientHeight+'px';
    ediv.style.left = '0px';
    ediv.style.width = document.getElementById("Tbody").clientWidth+'px';
    ediv.style.visibility = 'visible';*/
    document.getElementById('submenu1').style.height = "260px";
    document.getElementById('submenu2').style.height = "260px";
    document.getElementById('DcontenidoSubmenu').style.visibility = "visible";
    Fordenar();
    checkInterval = setInterval('FchequeoMovimiento();', 100);
}
function FcerrarMenu(){
    FreestablecerClassName();
    Fdesordenar(1);
    document.getElementById('submenu1').style.height = "0px";
    document.getElementById('submenu2').style.height = "0px";
    /*var ediv = document.getElementById("DdivLog");
    ediv.style.width = 0+'px';
    ediv.style.height = 0+'px';
    document.getElementById("DdivLog").style.visibility = 'hidden';*/
    submenuOpen = false;
    setTimeout("FocultarSubmenu();",10);
    clearInterval(checkInterval);
}
function FocultarSubmenu(){
    document.getElementById('DcontenidoSubmenu').style.visibility = "hidden";
    document.getElementById('DcontenidoSubmenu2').style.visibility = "hidden";
}
function FgetOffset(el){
    var _x = 0;
    var _y = 0;
    while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)){
        _x += el.offsetLeft-el.scrollLeft;
        _y += el.offsetTop-el.scrollTop;
        el = el.offsetParent;
    }
    return {top:_y,left:_x};
}
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
    //document.getElementById('test').innerHTML = cursorX+' - '+cursorY+' - Cubo: '+cuboActual;
    //if (submenuOpen && (cursorY < 77 || cursorY > 303+77)){
    if (submenuOpen && (cursorY < 0 || cursorY > 294)){
        FcerrarMenu();
    }
}
var rotateY = 0;
var rotateX = 0;
var cuboActual = false;
function FchequeoMovimiento(){
    if (cuboActual){
        FmoverCubito();
    }
}
function FajustarBox(id){
    textElem = document.getElementById('box'+id).children[0].children[0];
    document.getElementById('box'+id).children[0].style.width = textElem.offsetWidth + 15;
    document.getElementById('box'+id).children[1].style.width = textElem.offsetWidth + 15;
    document.getElementById('box'+id).children[4].style.width = textElem.offsetWidth + 15;
    document.getElementById('box'+id).children[5].style.width = textElem.offsetWidth + 15;
    document.getElementById('box'+id).children[2].style.webkitTransform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
    document.getElementById('box'+id).children[2].style.transform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
    document.getElementById('boxContenedor'+id).style.width = textElem.offsetWidth + 18;

    textElem = document.getElementById('2box'+id).children[0].children[0];
    document.getElementById('2box'+id).children[0].style.width = textElem.offsetWidth + 15;
    document.getElementById('2box'+id).children[1].style.width = textElem.offsetWidth + 15;
    document.getElementById('2box'+id).children[4].style.width = textElem.offsetWidth + 15;
    document.getElementById('2box'+id).children[5].style.width = textElem.offsetWidth + 15;
    document.getElementById('2box'+id).children[2].style.webkitTransform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
    document.getElementById('2box'+id).children[2].style.transform = "rotateY(90deg) translateZ("+(104-(220-(textElem.offsetWidth+15)))+"px)";
    document.getElementById('2boxContenedor'+id).style.width = textElem.offsetWidth + 18;
}
function boxLength(id){
    textElem = document.getElementById('box'+id).children[0].children[0];
    bLength = textElem.offsetWidth + 18;
    return bLength;
}
function FmoverCubito(){
    rotateY+=10;
    rotateX+=10;
    document.getElementById('box'+cuboActual).style.webkitTransform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
    document.getElementById('box'+cuboActual).style.transform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
    document.getElementById('2box'+cuboActual).style.webkitTransform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
    document.getElementById('2box'+cuboActual).style.transform = "translateZ(-50px) rotateY("+rotateY+"deg) rotateX("+rotateX+"deg)";
}
function FreestablecerCubito(id){
    if (id != cuboActual){
        document.getElementById('box'+id).style.webkitTransform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
        document.getElementById('box'+id).style.transform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
        document.getElementById('2box'+id).style.webkitTransform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
        document.getElementById('2box'+id).style.transform = "translateZ(-50px) rotateY(0deg) rotateX(0deg)";
        rotateY = 0;
        rotateX = 0;
    }
}
function Fordenar(){
    document.getElementById('DcontenidoSubmenu').children[VboxToMove].style.marginTop = "10px";
    document.getElementById('DcontenidoSubmenu').children[VboxToMove].style.marginLeft = "20px";
    document.getElementById('DcontenidoSubmenu').children[VboxToMove].style.position = "relative";
    if (document.getElementById('DcontenidoSubmenu').children.length-1 != VboxToMove){
        VboxToMove++;
        VtimeoutID = setTimeout("Fordenar()", 1500);
    } else {
        VboxToMove = 0;
    }
}
function Fdesordenar(arg){
    if (arg == 1){
        for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
            document.getElementById('DcontenidoSubmenu').children[i-1].style.width = boxLength(i);
            FrandomBoxPos(document.getElementById('DcontenidoSubmenu').children[i-1]);
        }
        setTimeout('Fdesordenar(2);', 150);
    } else {
        for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
            document.getElementById('DcontenidoSubmenu').children[i-1].className = 'boxClass2';
        }
    }
}
function FreestablecerClassName(){
    for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
            document.getElementById('DcontenidoSubmenu').children[i-1].className = 'boxClass1';
        }
}
function rand(from,to){
    return Math.floor(Math.random()*(to-from+1)+from);
}
function FrandomBoxPos(elem){
    cuadrante = rand(1,4);
    if (cuadrante == 1){
        elem.style.marginTop = rand(-100, -200);
        elem.style.marginLeft = rand(1, document.body.offsetWidth);
    } else if (cuadrante == 2){
        elem.style.marginTop = rand(1, document.body.offsetHeight);
        elem.style.marginLeft = rand((document.body.offsetWidth*-1)-300, -300);
    } else if (cuadrante == 3){
        elem.style.marginTop = rand(document.getElementById('DcontenidoSubmenu').offsetHeight+50, document.body.offsetHeight);
        elem.style.marginLeft = rand(1, document.body.offsetWidth);
    } else if (cuadrante == 4){
        elem.style.marginTop = rand(1, document.body.offsetHeight);
        elem.style.marginLeft = rand(document.body.offsetWidth+400, document.body.offsetWidth+600);
    }
}
function FmostrarTodas(){
    /*VboxToMove = 0;
    clearTimeout(VtimeoutID);
    VtimeoutID = 0;
    for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
        document.getElementById('DcontenidoSubmenu').children[i-1].className = 'boxClass3';
    }
    for (var i = 1; i <= document.getElementById('DcontenidoSubmenu').children.length; i++){
        document.getElementById('DcontenidoSubmenu').children[i-1].style.marginTop = "10px";
        document.getElementById('DcontenidoSubmenu').children[i-1].style.marginLeft = "20px";
    }*/
    document.getElementById('DcontenidoSubmenu').style.visibility = "hidden";
    document.getElementById('DcontenidoSubmenu2').style.visibility = "visible";
}
</script>
<div id="DcontenidoSubmenu" onMouseOver='FmostrarTodas();'>
    <div id='boxContenedor1' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(1);', 200);" onMouseOver='cuboActual=1;'>
        <div id='box1' class='cuboSubmenu'>
            <figure class='front'><a>seccsadsadsadsadon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor2' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(2);', 200);" onMouseOver='cuboActual=2;'>
        <div id='box2' class='cuboSubmenu'>
            <figure class='front'><a>secciasdsasadsadadsadsadsadsadsadasdon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor3' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(3);', 200);" onMouseOver='cuboActual=3;'>
        <div id='box3' class='cuboSubmenu'>
            <figure class='front'><a>seccioadsadn</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor4' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(4);', 200);" onMouseOver='cuboActual=4;'>
        <div id='box4' class='cuboSubmenu'>
            <figure class='front'><a>seccisadadsadsadadsadsadon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor5' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(5);', 200);" onMouseOver='cuboActual=5;'>
        <div id='box5' class='cuboSubmenu'>
            <figure class='front'><a>secciosdadadn</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor6' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(6);', 200);" onMouseOver='cuboActual=6;'>
        <div id='box6' class='cuboSubmenu'>
            <figure class='front'><a>seccgdgfgettetgfjhryeterdfggertertwerewrwion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor7' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(7);', 200);" onMouseOver='cuboActual=7;'>
        <div id='box7' class='cuboSubmenu'>
            <figure class='front'><a>secsdffsfdsfsfsfsfasdcion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor8' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(8);', 200);" onMouseOver='cuboActual=8;'>
        <div id='box8' class='cuboSubmenu'>
            <figure class='front'><a>seccasdsadsagertetgvfdgion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor9' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(9);', 200);" onMouseOver='cuboActual=9;'>
        <div id='box9' class='cuboSubmenu'>
            <figure class='front'><a>seccion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='boxContenedor10' class='boxClass1' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(10);', 200);" onMouseOver='cuboActual=10;'>
        <div id='box10' class='cuboSubmenu'>
            <figure class='front'><a>secciqewqeegfddfdsfqerwrewon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
</div>
<div id="DcontenidoSubmenu2" onMouseOver='FmostrarTodas();'>
    <div id='2boxContenedor1' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(1);', 200);" onMouseOver='cuboActual=1;'>
        <div id='2box1' class='cuboSubmenu'>
            <figure class='front'><a>seccsadsadsadsadon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor2' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(2);', 200);" onMouseOver='cuboActual=2;'>
        <div id='2box2' class='cuboSubmenu'>
            <figure class='front'><a>secciasdsasadsadadsadsadsadsadsadasdon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor3' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(3);', 200);" onMouseOver='cuboActual=3;'>
        <div id='2box3' class='cuboSubmenu'>
            <figure class='front'><a>seccioadsadn</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor4' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(4);', 200);" onMouseOver='cuboActual=4;'>
        <div id='2box4' class='cuboSubmenu'>
            <figure class='front'><a>seccisadadsadsadadsadsadon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor5' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(5);', 200);" onMouseOver='cuboActual=5;'>
        <div id='2box5' class='cuboSubmenu'>
            <figure class='front'><a>secciosdadadn</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor6' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(6);', 200);" onMouseOver='cuboActual=6;'>
        <div id='2box6' class='cuboSubmenu'>
            <figure class='front'><a>seccgdgfgettetgfjhryeterdfggertertwerewrwion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor7' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(7);', 200);" onMouseOver='cuboActual=7;'>
        <div id='2box7' class='cuboSubmenu'>
            <figure class='front'><a>secsdffsfdsfsfsfsfasdcion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor8' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(8);', 200);" onMouseOver='cuboActual=8;'>
        <div id='2box8' class='cuboSubmenu'>
            <figure class='front'><a>seccasdsadsagertetgvfdgion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor9' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(9);', 200);" onMouseOver='cuboActual=9;'>
        <div id='2box9' class='cuboSubmenu'>
            <figure class='front'><a>seccion</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
    <div id='2boxContenedor10' class='boxClass3' onClick="" onMouseOut="cuboActual=0;window.setTimeout('FreestablecerCubito(10);', 200);" onMouseOver='cuboActual=10;'>
        <div id='2box10' class='cuboSubmenu'>
            <figure class='front'><a>secciqewqeegfddfdsfqerwrewon</a></figure>
            <figure class='back'></figure>
            <figure class='right'></figure>
            <figure class='left'></figure>
            <figure class='top'></figure>
            <figure class='bottom'></figure>
        </div>
    </div>
</div>
<script>
for (var i=1; i <= 10; i++){
    FajustarBox(i);
}   
Fdesordenar(1);
</script>
<nav>
    <ul>
        <li onMouseOver="setTimeout('FabrirMenu(1,0);',600);mouseOverMenuItm=true;" onMouseOut='mouseOverMenuItm=false;'><div class='luz'></div><div style='background-image:url(\"https://liit.com.ar/web/inc/ima/fondo_botones_nav.png\");width:100px;height:30px;background-repeat:no-repeat;background-size: 100px 30px;'><a href=''>seccion</a></div></li>
        <li onMouseOver="children[0].className='luzhover';setTimeout('FabrirMenu(1,0);',600);mouseOverMenuItm=true;" onMouseOut="children[0].className='luz';mouseOverMenuItm=false;"><div class='luz'></div><div><a href=''>seccion</a></div></li>
    </ul>
</nav>
<div id='submenu1'>
    <div id='submenu2'></div>
</div>

只需将指针留在“seccion”按钮中，您就会看到动画。

是否有任何关于wtf的想法？

P.S。：我正在使用普通的javascript，我不想使用jQuery。

2 个答案:

答案 0 :(得分：0)

我相信你所寻找的是something like this

这是一个简化版本，在过渡期间没有模糊文本，并且在悬停时具有动画渐变和缩放。如this SO post

中所述，它涉及修复模糊的技巧 
/* CSS */
ul.navigation li {
    min-width: 114px;
    height: 37px;
    line-height: 21.5px;  
    text-align: center;
    position: relative;
    -webkit-transform: scale3d(.7, .7, 1);
    -moz-transform: scale3d(.7, .7, 1);
    -ms-transform: scale3d(.7, .7, 1);
    -o-transform: scale3d(.7, .7, 1);
    transform: scale3d(.7, .7, 1);
    font-size:24px;

    float: left;
    margin-right: 4px;
    border-style: solid;
    border-width: 2px;
    -webkit-border-image: url(ima/fondo_botones_nav.png) 2 fill stretch;
    border-image: url('ima/fondo_botones_nav.png') 2 fill stretch;
    -webkit-transition: -webkit-transform .4s .1s linear;
    transition: -ms-transform .4s .1s linear;
    display: list-item;

}
ul.navigation li * {
    pointer-events: none;
    color: #e6eaed;
    transition: .8s;
}
ul.navigation {
    list-style:none;    
}
ul.navigation li:hover {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
ul.navigation li:hover div:nth-child(2) {
    color: hsl(200, 85%, 43.7%);
}

.gradient {
    width: 100%;
    height: 7px;
    position: absolute;
    top:-2px;

    background: radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
    background: -webkit-radial-gradient(ellipse at center, hsla(183,100%,44.3%,1) 1%,hsla(190, 100%, 60%,1) 15%,hsla(203, 100%, 18.8%,0.4) 55%,hsla(203, 100%, 18.8%,0) 70%,hsla(203, 100%, 18.8%,0) 100%);
    -webkit-animation: AoverNav .8s forwards .2s;
    animation: AoverNav .8s forwards .2s;

    transition: .8s all;
}

/* Javascript */
var liList = document.getElementsByClassName('navigation')[0].getElementsByTagName('li'),
    orig;

for(var i = 0, j = liList.length; i < j; i ++)
{
    liList[i].onmouseover = function() {
        var myGradient = this.getElementsByClassName('gradient')[0];

        orig = parseInt(window.getComputedStyle(myGradient, null).getPropertyValue("top"));        
        myGradient.style.top = parseInt(window.getComputedStyle(this, null).getPropertyValue("height")) - parseInt(window.getComputedStyle(myGradient, null).getPropertyValue("height"))  + "px";
    }
    liList[i].onmouseout = function() {
        var myGradient = this.getElementsByClassName('gradient')[0];

        myGradient.style.top = orig + "px";
    }
}

答案 1 :(得分：0)

这就是我解决问题的方法：

  1. 我在菜单中为每个选项创建了1个新div（在其中有每个选项的html）。
  2. 我把新的div放到正确的位置。
  3. 我创建了一个javascript函数，为每个选项设置一个随机的左侧和顶部样式（只是每个框的html而不是我创建的div）。
  4. 我放置了过渡：左边3s轻松0s，前3个轻松每个选项0。
  5. 因此，当动画开始时，我设置顶部：0和左：0，所有的工作都像魅力：D
相关问题
最新问题