html - 如何使用CSS将文本与其阴影分开

Question

我有此动画，我想在阴影分离后隐藏黑色文本。这可能吗？蓝色文字阴影一出现，我就希望原件消失。这似乎不可能吗？

  body {
  background-color: grey;
}

.sometext {
  color: black;
  font-size: 40px;
  text-shadow: -2px -3px 10px rgba(255, 255, 255, 0.75), 2px 4px 12px rgba(0, 0, 0, 0.25);
  font-weight: bolder;
  text-align: center;
}

.sometext {
  animation: text-color 10s linear infinite;
  position: relative;
  animation-direction: alternate-reverse;
}

@keyframes text-color {
  from {
    text-shadow: -2px -3px 10px rgba(255, 255, 255, 0.75), 2px 4px 12px rgba(0, 0, 0, 0.25);
  }
  to {
    text-shadow: 10px 10px 30px rgba(255, 255, 255, 0.75), 30px 20px 4px rgba(211, 325, 255, 233);
  }
}

.white {
  position: relative;
  background-color: white;
  box-shadow: 10px 30px 30px 40px white;
  width: 20px;
  left: -1px;
  top: -110px;
  opacity: 0.1
}

.white {
  animation: torch 10s ease-in-out infinite;
  animation-delay: 0s;
  position: relative;
  animation-direction: alternate-reverse;
}

@keyframes torch {
  from {
    background-color: grey;
  }
  to {
    background-color: white;
    box-shadow: 10px 30px 30px 40px white;
    opacity: 0.9;
  }

<div class="sometext">Some text
</div>

那么，如何将文本与阴影分开，保留蓝色文本，隐藏黑色文本？

Answer 1

您可以将颜色设置为透明的动画:

body {
  background-color: grey;
}

.sometext {
  color: black;
  font-size: 40px;
  text-shadow: -2px -3px 10px rgba(255, 255, 255, 0.75), 2px 4px 12px rgba(0, 0, 0, 0.25);
  font-weight: bolder;
  text-align: center;
  animation: text-color 10s linear infinite;
  position: relative;
  animation-direction: alternate-reverse;
}

@keyframes text-color {
  from {
    text-shadow: -2px -3px 10px rgba(255, 255, 255, 0.75), 2px 4px 12px rgba(0, 0, 0, 0.25);
  }
  to {
    text-shadow: 10px 10px 30px rgba(255, 255, 255, 0.75), 30px 20px 4px rgba(211, 325, 255, 233);
    color:transparent;
  }
}

<div class="sometext">Some text
</div>