HTML/CSS中的替換文本

修復這些錯誤后，您的影片不會出現，因為-webkit-text-fill-color: transparent;洗掉了任何文本顏色。你應該把它改成color: transparent;你的情況。

更新：

1. 將文本更改為背景影像
2. 通過洗掉其他跨度依賴項來洗掉文本之間的延遲。

/*Vertical Flip*/

.verticalFlip {
  display: inline;
}

.verticalFlip span {
  animation: vertical 4s linear infinite 0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  background-position: 15% 20%;
}

.verticalFlip span:nth-child(2) {
  animation-delay: 2s;
}


/*Vertical Flip Animation*/

@keyframes vertical {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0;
    -moz-transform: rotateX(180deg);
  }
  10% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  25% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }
  80% {
    opacity: 0;
    -moz-transform: translateY(0px);
  }
  100% {
    opacity: 0;
  }
}


/* text */

#hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
}

<section id="hero">
  <h1 style="margin-bottom: 16px">Sample
    <div class="verticalFlip"><span>Change</span><span>Text</span></div></h1>
</section>

uj5u.com熱心網友回復：

你有一些損壞的 HTML，所以我修復了它。還用 div 替換了跨度，因為transform: rotate僅適用于塊元素，而不適用于span.

我影片，只是通過旋轉文本，而不是改變不透明度。如果你想添加它，我會把它留給你。我還在文本沒有影片的地方添加了一個暫停（從 90% 回圈到 10%，旋轉 0 度）。

為了讓所有元素都在同一行，我添加display: flex到你的h1, 并使旋轉文本覆寫我被迫使用網格布局，其中兩個孩子都在第 1 行和第 1 列 ( grid-area)。當我這樣做時，我嘗試過position: absolute但background-clip: text在 Firefox 上不起作用。

我增加了字體大小以便以更好的方式顯示背景剪輯。

[編輯] 顯然，Chromebackground-clip: text與backface-visibility: hidden.

作業示例：Firefox

顯示代碼片段

#hero > h1 {
  display: flex;
  margin: 0;
  margin-bottom: 16px;

  font-size: 78px;
  font-weight: 700;

  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.verticalflip {
  display: grid;
}

.verticalflip > div {
  --animation-duration: 6s;

  grid-area: 1 / 1;
  animation: vertical var(--animation-duration) linear infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.verticalflip > div:nth-child(1) {
  animation-delay: calc(-0.5 * var(--animation-duration));
}

@keyframes vertical {
  10%  { transform: rotateX(0deg);   }
  40%  { transform: rotateX(180deg); }
  60%  { transform: rotateX(180deg); }
  90%  { transform: rotateX(0deg);   }
}

<section id="hero">
  <h1 style="">
    <div>Sample&nbsp;</div>
    
    <div class="verticalflip">
      <div>Change</div>
      <div>Text</div>
    </div>
  </h1>
</section>

作業示例：Chrome 和 Safari

顯示代碼片段

#hero > h1 {
  display: flex;
  margin: 0;
  margin-bottom: 16px;

  font-size: 78px;
  font-weight: 700;

  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

#hero div {
  /* Chrome somehow "looses" the background when animating it */
  background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
  -webkit-background-clip: text;
}

.verticalflip {
  display: grid;
}

.verticalflip > div {
  --animation-duration: 6s;

  grid-area: 1 / 1;
  animation: vertical var(--animation-duration) linear infinite;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.verticalflip > div:nth-child(1) {
  animation-delay: calc(-0.5 * var(--animation-duration));
}

@keyframes vertical {
  10%  { transform: rotateX(0deg);   }
  40%  { transform: rotateX(180deg); }
  60%  { transform: rotateX(180deg); }
  90%  { transform: rotateX(0deg);   }
}

<section id="hero">
  <h1 style="">
    <div>Sample&nbsp;</div>
    
    <div class="verticalflip">
      <div>Change</div>
      <div>Text</div>
    </div>
  </h1>
</section>

標籤：

上一篇：更改懸停時顯示的影像并單擊

下一篇：在Vue中使用帶有props的動態組件的優雅方式