另一個div隨第一個div一起移動（在第一個div的動畫中）

我的目標是構建一個圖像滑塊，其中APPLE徽標動畫運行時，蘋果產品從下面俯衝。問題是這樣的，我添加了@keyframes動畫，使iPhone從右側（我們的右側）出現，然後離開，因爲它突然將屏幕放到左側。另一個div隨第一個div一起移動（在第一個div的動畫中）

但是當我添加MACBOOK，甚至沒有爲它添加任何動畫時，它就會與iPhone一起運行！

這裏的HTML和樣式：

HTML：

<html> 
    <head> 
     <title>Slider</title> 
     <link rel="stylesheet" type="text/css" href="styles/styles_Apple.css"> 
     <link rel="stylesheet" type="text/css" href="styles/styles_Google.css"> 
     <link rel="stylesheet" type="text/css" href="styles/styles_Samsung.css"> 
     <link rel="stylesheet" type="text/css" href="styles/styles_Nikon.css"> 
    </head> 
    <body> 
     <div class="slider"> 
      <div class="Apple_logo"><img src="images/logos/Apple_logo color.png" style="width:100px; height:125px;"></div> 
      <div class="iPhone_6"><img src="images/mobiles/Mobile1.png" style="height:400px" width="200px;"</div> 
      <div class="Apple_Macbook"><img src="images/laptops/apple macbook pro 2.png" style="height:400px; width:550px;"></div> 

     </div> 
    </body> 
</html>

風格：

.slider 
{ 
    height:600px; 
    width:980px; 
    border:thick; 
    border-color:#000; 
    border-style:groove; 
    vertical-align:middle; 
    margin:0 auto; 
} 

.Apple_logo 
{ 
    border:thick; 
    border-color:#000; 
    border-style:groove; 
    width:100px; 
    margin-left:1000px; 
    -webkit-animation-name:Apple_logo_appear; 
    -webkit-animation-duration:10s; 
} 

@-webkit-keyframes Apple_logo_appear 
{ 
    0%{margin-left:1000px; opacity:.3} 
    50%{margin-left:440px; opacity:1} 
    100%{margin-left:440px; opacity:0;} 
} 

.iPhone_6 
{ 
    position:absolute; 
    border:thick; 
    border-color:#000; 
    border-style:groove; 
    width:200px; 
    height:400px; 
    margin-left:1000px; 
    -webkit-animation-name:iPhone_6_appear; 
    -webkit-animation-duration:2s; 
    -webkit-animation-delay:1s; 
    animation-fill-mode: forwards; 
} 

@-webkit-keyframes iPhone_6_appear 
{ 
    0%{margin-left:1000px; opacity:.3} 
    50%{margin-left:440px; opacity:1} 
    100%{margin-left:-500px; opacity:0;} 
} 

.Apple_Macbook 
{ 
    border:thick; 
    border-color:#000; 
    border-style:groove; 
    margin-left:1300px; 
}

來源

2015-02-07 Danish

此代碼是不正確的：

<div class="iPhone_6"><img src="images/mobiles/Mobile1.png" style="height:400px" width="200px;"</div>

應該

<div class="iPhone_6"><img src="images/mobiles/Mobile1.png" style="height:400px;width:200px;"></div>

（style屬性內的高度/寬度參數的符號，並<img>標籤未關閉 - 這應該是你的問題的原因。）

來源

2016-05-11 19:37:53 Johannes

另一個div隨第一個div一起移動（在第一個div的動畫中）

回答

相關問題