0

背景画像（両方の画像が同じ）の不透明度を変更したいのですが、変更は30 to 45 degree

また、これはアニメーション化front imageしてからbackground image再びbackgroung imagefront image

2 つの画像は次のとおりです。

ここに画像の説明を入力 と ここに画像の説明を入力

最初の画像が表示され、しばらくすると2番目が表示されるようにアニメーションが必要ですが、その高さは0から画像の最大高さに成長する必要があります。また、アニメーションは角度にする必要があります30 degree

コードを使用しました

HTML:

    <div class="img_shake">          
        <img id="img_shake" src="img_shake.png" alt="img_shake">    
    </div>

    <div id="div_img_shake_patchwork">
        <img id="img_shake_patchwork" src="img_shake_patchwork.png" alt="img_shake_patchwork">  
    </div>
</div>

CSS:

#main-container{
    position: relative;
    top:0%;
    left:0%;
    height: 480px;
    width: 320px;   
    overflow: hidden;       
    background-size: 100% 100%;
    background-position: center center; 
    opacity:1;
}


#img_shake {
    position: absolute;
    right: 27%;
    opacity: 0;
    top: 27%;
    z-index:2;
}
@-webkit-keyframes img_shake_anim
{
    from {right:-30%;}
    to {right:27%;}
}

@-webkit-keyframes img_shake_anim_again
{
    from {left:27%}
    to {left:0%}
}
@-webkit-keyframes img_shake_fade_in
{
   0%    {opacity:0;}
   100%  {opacity:1;} 
}


#img_shake_patchwork {
    width:100%;
}


#div_img_shake_patchwork
{
    position:absolute;
    top:27%;
    right:27%;  
    overflow : hidden;
    z-index:2;
    height:277px;
    opacity:0;
}

@-webkit-keyframes div_img_shake_patchwork_anim
{
   0%    {height:0;opacity:1;/*-webkit-transform: rotate(-30deg);*/}  
   100%  {height:277px;opacity:1;/*-webkit-transform: rotate(0deg);*/} 
}
4

2 に答える 2

1

background-image遷移を行いません。ある画像を別の画像の上に使用position: absoluteして配置する必要があります。その後、トップ画像の をz-indexトランジションできます。opacity

于 2013-02-21T13:19:33.957 に答える
0

スタイルを変更することで、次のことが可能になります。

#img_shake_patchwork {
    width:148px;/*Width of Image*/
    -webkit-transform: rotate(30deg);
    left: 22%;
    position: absolute;
    top: 0%;
}

#div_img_shake_patchwork
{
    position:absolute;
    top:26%;
    left:6%;  
    overflow : hidden;
    z-index:2;
    height:277px;/*Height of Image*/
    opacity:0;
    width:296px;/*Double width of Image*/
    -webkit-transform: rotate(-30deg);
}

@-webkit-keyframes div_img_shake_patchwork_anim
{
   0%    {height:0;opacity:1;left:-16% ;top:30%; }  
   100%  {height:277px;opacity:1;left:6%; top:26%; /*-webkit-transform: rotate(0deg);*/} 
}
于 2013-02-27T05:30:45.017 に答える