从背景图像的中心显示文本答案

【问题标题】：reveal text from center against a background image从背景图像的中心显示文本
【发布时间】：2017-03-26 17:59:18
【问题描述】：

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

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%
  }
}

【问题讨论】：

标签： css background-image css-animations

【解决方案1】：

我为您的课程添加了 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】：

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

然后您会执行与现在相同的动画，但会倒退。（在第三层，逻辑上）

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

【讨论】：