CSS世界之文字描边动画

效果展示

VIEW ROOM

实现思路

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

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

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

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

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

实现代码

1
2
3
<svg class="text-stroke" viewBox="0 0 500 150" width="100%" height="100%">
  <text class="text" x="0" y="80">VIEW ROOM</text>
</svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.text-stroke {
    font-size: 80px;
    letter-spacing: 4px;
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 100%;
    animation: textStrokeAnim 3s linear both;
}

@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);
    }
}