Question

我需要通过 span class = 元素将几个参数应用于文本。尽管我绝对严格遵循suggested格式-参数之间用空格隔开-我的 1st 参数不起作用（从单词中删除 blur 过滤器注意！）。

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: #f92504;
  margin: 0.7% 0 1.4% 1vw;
  text-shadow: 0em 0.12em 0.15em rgba(0, 102, 204, 0.2), 0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1), -0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1);
  font-size: calc(0.5em + 2.3vw);
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  font-weight: 400;
  word-wrap: break-word;
  text-shadow: none;     /* МОЖЕТ И ПОСТАВИТЬ ЛЕГКУЮ ТЕНЬ...? */
  margin: 0% 1vw 2% 1vw;
  font-size: calc(0.35em + 1.5vw);
}

.blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes blur_decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}

.grayscale_filter_off {
animation-name: grayscale_decrease;
animation-timing-function: linear;
animation-duration: 2s;
}

@keyframes grayscale_decrease {
from { filter: grayscale(85%); }
to { filter: grayscale(0); }
}

    <div class="comment_box">
    <div class="comment_title"><span class="blur_filter_off grayscale_filter_off">ATTENTION!</span>
    </div>
    <div class="comment_text"><span class="blur_filter_off">Comment: Lorem ipsum dolor sit amet...</span>
    </div>
    </div>

<br>

请问我的代码有什么问题？

Answer 1

您的grayscale_filter_off类将覆盖您的blur_filter_off类，因为它们设置了相同的属性。

为了同时运行这两个动画，您需要使用另一个同时运行这两个动画的类。

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: #f92504;
  margin: 0.7% 0 1.4% 1vw;
  text-shadow: 0em 0.12em 0.15em rgba(0, 102, 204, 0.2), 0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1), -0.09em 0.15em 0.15em rgba(249, 37, 4, 0.1);
  font-size: calc(0.5em + 2.3vw);
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  font-weight: 400;
  word-wrap: break-word;
  text-shadow: none;
  /* МОЖЕТ И ПОСТАВИТЬ ЛЕГКУЮ ТЕНЬ...? */
  margin: 0% 1vw 2% 1vw;
  font-size: calc(0.35em + 1.5vw);
}

.blur_filter_off {
  animation-name: blur_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes blur_decrease {
  from {
    filter: blur(0.35em);
  }
  to {
    filter: blur(0);
  }
}

.grayscale_filter_off {
  animation-name: grayscale_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes grayscale_decrease {
  from {
    filter: grayscale(85%);
  }
  to {
    filter: grayscale(0);
  }
}

.grayscale_blur_filters_off {
  animation-name: grayscale_blur_decrease;
  animation-timing-function: linear;
  animation-duration: 2s;
}

@keyframes grayscale_blur_decrease {
  from {
    filter: grayscale(85%) blur(0.35em);
  }
  to {
    filter: grayscale(0) blur(0);
  }
}

<div class="comment_box">
  <div class="comment_title"><span class="grayscale_blur_filters_off">ATTENTION!</span>
  </div>
  <div class="comment_text"><span class="blur_filter_off">Comment: Lorem ipsum dolor sit amet...</span>
  </div>
</div>

为什么带有_several_参数的SPAN CLASS =无法正常工作？

1 个答案: