详解CSS实现文字动画的N种技巧
更新时间：2023-10-10CSS动画简述
CSS动画目前已经是Web开发领域中最为流行的技术之一，这是因为CSS动画可以允许开发者在不需要额外的JavaScript和Flash的情况下轻易地添加动画效果。使用CSS动画可以实现的不仅仅是图片和形状的变换，还包括文字。在这篇文章中，我们将探讨CSS动画实现文字动画的方法。
技巧1：使用字母动画
对于标签中的文本，我们可以通过将它们分割成单独的字母，然后对每个字母应用动画效果来创建文字动画。下面的CSS代码中，在每个字符之间添加了0.1秒的延迟来实现字母逐个展现的动画效果。
.animation {
font-size: 3em;
line-height: 1.2em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
animation: showup 1s linear both;
}
@keyframes showup {
from {
width: 0;
}
to {
width: auto;
}
}
.animation span {
display: inline-block;
animation: showup 1s linear both;
animation-delay: calc(0.09s * var(--char));
--char: 0;
}
技巧2：使用clip-path属性
另一个创建文字动画的方法是使用CSS的clip-path属性。将文本的背景图像制作成一个蒙版，然后使用动画来让蒙版从左到右移动，以此来逐步显示文本。使用clip-path属性的好处是，您可以实现独特的动画效果，如下面的CSS代码所示，可在文本周围创造一个褪色的效果，类似于文本被风吹散的感觉。
.animation {
position: relative;
width: fit-content;
line-height: 1;
margin: 0 auto;
padding: 0 0 0 0.5em;
background: url("http://i.stack.imgur.com/CUcWL.png");
background-color: blue;
background-size: auto 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: showup 4s linear infinite;
}
@keyframes showup {
0%, 20% {
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
90%, 100% {
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
20.1%, 70% {
-webkit-clip-path: polygon(0 0, 0 100%, 2% 100%, 2% 0, 6% 0, 6% 100%, 10% 100%, 10% 0, 14% 0, 14% 100%, 18% 100%, 18% 0, 22% 0, 22% 100%, 26% 100%, 26% 0, 30% 0, 30% 100%, 34% 100%, 34% 0, 38% 0, 38% 100%, 42% 100%, 42% 0, 46% 0, 46% 100%, 50% 100%, 50% 0, 54% 0, 54% 100%, 58% 100%, 58% 0, 62% 0, 62% 100%, 66% 100%, 66% 0, 70% 0, 70% 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 2% 100%, 2% 0, 6% 0, 6% 100%, 10% 100%, 10% 0, 14% 0, 14% 100%, 18% 100%, 18% 0, 22% 0, 22% 100%, 26% 100%, 26% 0, 30% 0, 30% 100%, 34% 100%, 34% 0, 38% 0, 38% 100%, 42% 100%, 42% 0, 46% 0, 46% 100%, 50% 100%, 50% 0, 54% 0, 54% 100%, 58% 100%, 58% 0, 62% 0, 62% 100%, 66% 100%, 66% 0, 70% 0, 70% 100%, 100% 100%, 100% 0);
}
70.1%, 90% {
-webkit-clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 0, 14% 0, 14% 100%, 18% 100%, 18% 0, 22% 0, 22% 100%, 26% 100%, 26% 0, 30% 0, 30% 100%, 34% 100%, 34% 0, 38% 0, 38% 100%, 42% 100%, 42% 0, 46% 0, 46% 100%, 50% 100%, 50% 0, 54% 0, 54% 100%, 58% 100%, 58% 0, 62% 0, 62% 100%, 66% 100%, 66% 0, 70% 0, 70% 100%, 100% 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 0, 14% 0, 14% 100%, 18% 100%, 18% 0, 22% 0, 22% 100%, 26% 100%, 26% 0, 30% 0, 30% 100%, 34% 100%, 34% 0, 38% 0, 38% 100%, 42% 100%, 42% 0, 46% 0, 46% 100%, 50% 100%, 50% 0, 54% 0, 54% 100%, 58% 100%, 58% 0, 62% 0, 62% 100%, 66% 100%, 66% 0, 70% 0, 70% 100%, 100% 100%, 100% 0);
}
}
技巧3：使用文字阴影
通过为文本添加无限彩虹阴影，您可以为文本创造一个有趣的视觉效果。下面是一段CSS代码示例：
.animation {
font-size: 10em;
margin: 0;
padding: 0;
background-color: #222;
color: transparent;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
animation: shadow 3s infinite linear;
}
@keyframes shadow {
to {
text-shadow:
-3px -3px 0 rgb(111, 191, 110),
3px -3px 0 rgb(252, 212, 64),
3px 3px 0 rgb(255, 107, 107),
-3px 3px 0 rgb(14, 201, 255);
}
}
技巧4：使用动态文字动画
这种类型的动画不仅创造了更可视化的效果，而且同时可以传达信息和故事。动态文字通常会在鼠标指针悬停在文本上时被触发。下面是一段使用CSS实现的动态文字动画的示例代码：
.animation {
position: relative;
display: inline-block;
font-size: 9em;
color: #fff;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
will-change: transform;
}
.animation:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
color: #00aaff;
text-shadow: -1px -1px 5px #00aaff,
1px -1px 5px #00aaff,
1px 1px 5px #00aaff,
-1px 1px 5px #00aaff;
}
.animation:hover:before {
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
