0

私はこのコードを持っています:

@keyframes margin-title
{
0% {margin: -170px 0 0 0}
100% {margin: -130px 0 0 0}
}

@-webkit-keyframes margin-title
{
0% {margin: -170px 0 0 0}
100% {margin: -130px 0 0 0}
}

h1 {
    margin: -130px 0 0 0;
    text-shadow: 0 0 10px #000;
    animation: margin-title 1s ease, fade-title 4s;
        -webkit-animation: margin-title 1s ease, fade-title 4s;
}

HTML:

 <div id="home">
<h1>Photal</h1>

<p>lorem ipsum</p>

</div>

問題は、アニメーション「keyframe-title」がヘッダーだけでなく段落にも表示されることですが、段落に CSS コードを使用していません。それらは両方とも div 内にあり、影響を与える可能性のあるアニメーションはありません (推測します)。

ここにjsfiddleがあるので、理解できます： http://jsfiddle.net/ad3gP/1/

ありがとうございました

4

1 に答える 1

1

CSS ファイルの末尾を次のように置き換えます。

    h1 {
    width: 440px;
    float: left;
    text-align:center;
    margin: -130px 0 0 0;
    color:#FFF;
    font-size:70px;
    font-family: 'Berkshire Swash', cursive;
    text-shadow: 0 0 10px #000;
    opacity:0.7;
        filter:Alpha(opacity=70);
    transition:opacity 0.5s;
        -webkit-transition:opacity 0.5s;
    animation: margin-title 1s ease, fade-title 4s;
        -webkit-animation: margin-title 1s ease, fade-title 4s;
}

h1:hover {
    opacity:0.9;
        filter:Alpha(opacity=90);
}

table {
    margin-top: -30px;
}

float: left;(およびwidth: 440px;にh1およびmargin-top: -30px;に追加table)

機能しなかった理由は、表がタイトルの下から始まるためです。タイトルが下に移動すると、テーブルも下に移動します。

于 2013-04-15T19:53:40.637 に答える