Question

我正在尝试使文本显示this one之类的CSS动画。使用::before和::after似乎是一种过于复杂的方法，因此我尝试使用线性渐变背景色，背景位置或其他更简单的方法来做到这一点。

:root {
  --primary-rgba: rgba(17,184,106,1);
  --secondary-rgba: rgba(255,255,255,1);
}

@keyframes slidein {
  0% {
    background: transparent;
  }
  25% {
    background: linear-gradient(90deg, var(--secondary-rgba) 0%, var(--secondary-rgba) 50%, var(--primary-rgba) 50% var(--primary-rgba) 100%); 
  }
  50% {
    background: var(--secondary-hex);
  }
  75% {
    background: linear-gradient(90deg, var(--primary-rgba) 0%, var(--primary-rgba) 50%, var(--secondary-rgba) 50% var(--secondary-rgba) 100%); 
  }
  100%   {
    background: transparent;
  }
}

我什至想知道是否向动画中添加更多帧是否可以使其按我想要的方式工作，并尝试了hacking in a bunch of (repetative) frames。还是没有运气。

发现CSS transitions likely don't support gradients yet后，我尝试使用背景位置显示文本，但没有成功。

这两种方法都可行吗？

Answer 1

使用背景创建显示的唯一方法是考虑多个背景层，其中一个背景使用background-clip:text，这样您还可以使用背景为文本着色并控制其位置。

这里是一个基于a previous answer的示例。诀窍是让两层动画相同，然后最后使顶部的动画，使其顶部的宽度为0，同时将另一层（文本层）的宽度保持为100％

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #8ce2ea;
  margin:0;
}

.reveal-text {
  position: relative;
  font-size: 50px;
  color: transparent;
  background-image: 
    linear-gradient(#f2f98b, #f2f98b), 
    linear-gradient(#fff,#fff);
  -webkit-background-clip:
    padding-box,
    text;
  background-clip:
    padding-box,
    text;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left;
  animation: revealer-text 0.8s 1s forwards;
}

@keyframes revealer-text {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 100% 100%;
    background-position: left;
  }
  51% {
    background-size: 100% 100%;
    background-position: right;
  }
  100% {
    background-size: 0% 100%,100% 100%;
    background-position: right;
  }
}

<h1 class="reveal-text">
  I'm here.
</h1>

这可能无法在所有浏览器中正常工作，因此，如果您希望使用后台的更多支持方式，则至少需要一个额外的元素，就像我在这里Clip-path alternatives for reveal text

使用CSS动画和背景色显示文字

1 个答案: