Question

我试图从中心向具有背景图像的元素显示文本。如果我使动画的背景为纯色，则在动画完成之前，文本周围会出现纯色。如果我在文本后面放置与包含元素后面相同的背景图像，则在我的文本周围会出现相同图像的不同版本。有什么建议吗？

HTML：

<div class="container-big" id="the-wall">
      <div class="chapter-hed">
        <h5>PART 1</h5>
        <h4 class="showhead">My heading</h4>
      </div>
    </div>

的CSS：

#the-wall {
  background-image: url(../img/wopo-3.png);
  background-position: center;
  background-size: cover;
  background-color: black;
}
.chapter-hed h4 {
  font-family: 'proxima-nova';
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: -2.4px;
  line-height: 6.2rem;
  text-align: center;
  color: white;
  margin: 0 auto;
  border-bottom: 10px solid #e40d0d;
}

.chapter-hed h4:before {
left:0;
}
.chapter-hed h4:after {
right:0;
}
.chapter-hed h4:after,.chapter-hed h4:before { 
position:absolute;
content:"";
height:100%;
height: 109px;
/*background:black;*/
background-image: url(../img/wopo-3.png);
  background-position: center;
  background-size: cover;
  background-color: black;

}
.showhead:after, .showhead:before {
    animation: revealText 4s;
    animation-fill-mode:forwards; 
}

@keyframes revealText {
  0% {
     width:50%
    }
  100% {
     width:0%
  }
}

Answer 1

你可以制作3层。你想要的图像的底部。在文本之间。前面的图像，但这次分成两半。

你做的就是你现在的动画，但是倒退了。（在第三层，逻辑上）

当然有一个更合适的解决方案，但这是我头脑中发生的第一件事

Answer 2

我为你的班级添加了2个包装器。一个滑向左侧，另一个滑向右侧。净效应是元素保持居中，并逐步显示

#the-wall {
  background-image: url(http://lorempixel.com/400/200);
  background-position: center;
  background-size: cover;
  background-color: black;
}

.showheadctn1,
.showheadctn2 {
  width: 100%;
  overflow: hidden;
}

.showheadctn1 {
  transform: translateX(50%);
}

.showheadctn2 {
  transform: translateX(-100%);
}

.showhead {
  font-family: 'proxima-nova';
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: -2.4px;
  line-height: 6.2rem;
  text-align: center;
  color: white;
  margin: 0 auto;
  border-bottom: 10px solid #e40d0d;
  width: 100%;
  transform: translateX(50%);
}

.showheadctn1,
.showheadctn2,
.showhead {
  animation: revealText 4s infinite;
  animation-fill-mode: forwards;
}

@keyframes revealText {
  0% {}
  100% {
    transform: translateX(0%);
  }
}

<div class="container-big" id="the-wall">
  <div class="chapter-hed">
    <h5>PART 1</h5>
    <div class="showheadctn1">
      <div class="showheadctn2">
        <h4 class="showhead">My heading</h4>
      </div>
    </div>
  </div>
</div>

从中心显示文本背景图像

2 个答案: