另一个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的动画中）

回答

相关问题