📅 最后修改于: 2023-12-03 15:40:04.897000 🧑 作者: Mango
在 HTML 和 CSS 中，我们可以制作很多炫酷的动画效果来增加我们的网站交互性和吸引力。其中之一就是文本动画。通过 CSS 属性和动画，我们可以创建很多种不同的文本动画效果。在本文中，我们将深入探讨如何使用 CSS 和 HTML 制作文本动画。
让我们从最基本的文本动画开始，通过以下代码可以实现一个简单的文本动画：
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 48px;
font-weight: bold;
color: #000;
animation: text-animation 2s linear infinite;
}
@keyframes text-animation {
0% {
color: #000;
}
50% {
color: #f00;
}
100% {
color: #000;
}
}
</style>
</head>
<body>
<div class="text">Hello, World!</div>
</body>
</html>
这个文本动画将在两秒钟内不断变换文本颜色。我们使用 @keyframes 定义动画，通过将动画绑定到类名为 “text” 的 div 元素上，通过 animation 属性来实现动画效果。
我们也可以通过 CSS 和 HTML 来制作滚动文字动画，例如：
<!DOCTYPE html>
<html>
<head>
<style>
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: marquee-animation 5s linear infinite;
}
@keyframes marquee-animation {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="marquee">This is a scrolling text animation!</div>
</body>
</html>
这个动画将文本滚动从右向左，转换速度为每五秒一次。我们通过 white-space、overflow 和 text-overflow 属性来控制文本换行和省略号的显示方式。同时，我们可以使用 transform 属性中的 translateX 来实现动画效果。
最后，我们还可以使用逐字显示效果来制作一些很酷的文本特效。例如：
<!DOCTYPE html>
<html>
<head>
<style>
.typewriter {
display: inline-block;
overflow: hidden;
letter-spacing: .15em;
animation: typing 3.5s steps(40,end) 1s 1 normal both,
blinking-caret .75s step-end infinite;
font-family: monospace;
white-space: nowrap;
font-size: 24px;
cursor: default;
color: #000;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blinking-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: #000;
}
}
</style>
</head>
<body>
<div class="typewriter">Hello, World!</div>
</body>
</html>
这个特效将在三秒半内逐字显示文本，插入光标也会一同显示。我们使用 letter-spacing 属性来控制字母之间的间距，并使用步进函数 steps 来控制逐字显示的效果。漂亮吧！
CSS 和 HTML 提供了许多用于制作文本动画的属性和方法。通过结合这些属性和方法，我们可以创造出很多独特的文本动画效果。在本文中，我们演示了一些基本的文本动画例子，希望能够为你在网页设计中添加一些炫酷特效的想法提供一些启示。