1

私の目的は、イメージ スライダーを作成することです。APPLE ロゴ アニメーションが実行されている間、Apple 製品が下から急降下します。問題はこれです。@keyframes アニメーションを追加して、iPhone を右 (私たちの右) から表示し、画面を左に急降下させたままにします。

しかし、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;
}
4

1 に答える 1

0

このコードは正しくありません:

<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>

(スタイル属性内の高さ/幅パラメーターの表記、および<img>タグが閉じられていない - これが問題の原因であるはずです。)

于 2016-05-11T19:37:53.870 に答える