Question

我试图在特定页面（不是全部）中淡入我的文字。目前我有一个样式表。我的淡入效果正常但我不希望它跨越所有页面。我想通过一个类或id来选择它。

<div class="container">
  <div class="text-tranform">
    <div class="title-header">
      <div class="row">
        <div class="col-md-12">
          <h2> Some dummy text </h1>
        </div>
      </div>
    </div>
  </div>
<div>

.text-transform h1,h2,h3,h4,h5,p{
  animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

Answer 1

这是您的css选择器的问题。

.text-transform h1,h2,h3,h4,h5,p{
//...
}

您将样式应用于h1下的后代的每个.text-transform，然后是所有h2，h3，h4等......天真的解决方案是使用这个

.text-transform h1,
.text-transform h2,
.text-transform h3,
.text-transform h4,
.text-transform h5,
.text-transform p{
//..
}

这不是很好的代码imo。为什么不直接在元素上应用.text-transform？

Answer 2

这与您在css .text-transform h1,h2,h3,h4,h5,p

中选择的方式有关

这表示对.text-transform元素内的所有h1元素产生影响。对所有h2，h3，h4，h5和p元素也会产生相同的效果，无论它们在哪里。您的选择应该是：

.text-transform h1,
.text-transform h2,
.text-transform h3,
.text-transform h4,
.text-transform h5,
.text-transform p

文本动画特定页面css

2 个答案: