1

前景オブジェクトと背景の 2 つのアニメーション要素を持つアニメーションを作成しようとしています。両方とも div に含まれており、コンテナ div を超えて前景要素のオーバーフローを非表示にしたいのですが、overflow:hidden;期待どおりに機能していません。これはアニメーションでは機能しませんか?

こちらをご覧ください --> http://verybradthings.com/chhopper/index.html

HTML

<div class="container">
    <div class="scene-container">
        <img src="img/chopper.svg" id="chopper"/>
        <div id="skyline"></div>
    </div>
</div>

CSS

.container{
    display: block;
    width: 600px;
    margin: 0 auto;
}
.scene-container{
    display: inline-block;
    height: 175px;
    width: 231px;
    overflow: hidden;   
}
#chopper{
    display: inline-block;
    position: absolute;
    z-index: 1;
    -webkit-animation: chopper-scale 3s infinite linear;
}
#skyline{
    display: inline-block;
    height: 174px;
    width: 230px;
    outline: 1px blue solid;
    background: url(img/skyline.svg);
    background-repeat: repeat-x;
    -webkit-animation: move 5s infinite linear, scale 5s infinite ease;
}

/*Skyline scale and move*/
@-webkit-keyframes scale{
    0%   {-webkit-transform:scale(1);}
    50%  {-webkit-transform:scale(1.5);}
    100% {-webkit-transform:scale(1);}
}
@-webkit-keyframes move{
    0%    {background-position: 0 0;}
    50%   {background-position: 115px 0;}
    100%  {background-position: 230px 0;}
}
/* Chopper scale */
@-webkit-keyframes chopper-scale{
    0%   {-webkit-transform:scale(1);}
    50%  {-webkit-transform:scale(1.5);}
    100% {-webkit-transform:scale(1);}
}
4

1 に答える 1

3

どうでも！私のz-indexはそれを狂わせていました。私が見逃していたのは単純なものだとわかっていました。

于 2013-08-22T23:06:55.640 に答える