CSS 世界之文字描边动画

效果展示

<div class="container">
  <svg class="text-stroke" viewBox="0 0 500 150" width="100%" height="100%">
    <text class="text" x="0" y="80">VIEW ROOM</text>
  </svg>
</div>

.container {
  display: flex;
  justify-content: center;
  block-size: min(10rem, 23vw);
}

.container .text-stroke {
  font-size: 80px;
  letter-spacing: 4px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 100%;
  animation: textStrokeAnim 3s linear both;
}

.container .text-stroke:hover {
  animation-iteration-count: 10;
}

@keyframes textStrokeAnim {
  0% {
    stroke-dasharray: 100%;
    fill: #0000;
  }
  95% {
    stroke-dasharray: 0%;
    fill: #0000;
  }
  100% {
    stroke-dasharray: 0%;
    fill: #9b9dad;
    filter: drop-shadow(2px 2px 10px #0007);
  }
}

实现思路

这个动画的核心就是 svg 描边的使用

当动画播放时，文本会从虚线描边变为实线描边，并且填充颜色逐渐显示，并带有投影阴影效果

---

在动画开始时（0%），描边样式为 100%长度的虚线，填充颜色为透明

在动画进行到（95%），描边样式变为实线，即虚线消失，填充颜色仍为透明

在动画完成时（100%），描边样式为实线，并应用了一个投影效果，使得文本出现了投影阴影