另一个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;
}
答
此代码是不正确的:
<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>
标签未关闭 - 这应该是你的问题的原因。)