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>

问题是动画“关键帧标题”不仅显示在标题上，还显示在段落上，而我的段落没有使用任何 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;h1margin-top: -30px;table

它不起作用的原因是表格从您的标题下方开始。当标题向下移动时，表格也向下移动。

于 2013-04-15T19:53:40.637 回答