前言：要实现CSS字体动态效果，就要用到CSS3的animation和@keyframes属性。关于这两个属性就不过多的解释了，在我上上上篇文章有过讲解在目录的‘动画和过滤样式’进入 ，想了解的，可以点击进入，找到目录十。
文章目录：
- 文字颜色闪烁效果
- 文字逐字出现效果
- 文字放大缩小效果
- 文字从上到下逐子出现效果
附上视频
CSS常见的动态文字
注意：
注意：文字动态效果需要要用到两个关键属性，哪两个属性呢？
animation和@keyframes属性
@keyframes关键贴：通过定义关键帧之间的样式变化来实现动态效果，可以控制元素的旋转、缩放、移动等
animation动画：通过定义一系列动画帧和动画间隔来实现复杂的动态效果，可以控制动画的时间、速度、方向和循环次数等。
在这里就不过多讲解代码的概念，主要的几个关键属性上面有注释，可以看上面，这里直接上我们字体酷酷动态的代码
一、文字颜色闪烁效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字闪烁效果</title>
<style>
@keyframes siz {
0%{
color:red;
}
50%{
color:blue;
}
100%{
color:green;
}
}
h1{
animation: siz 1s linear infinite;
}
</style>
</head>
<body>
<h1>半杯可可最帅</h1>
</body>
</html>以上代码就是文字颜色闪烁效果
二、文字逐字出现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字一个一个出现</title>
<style>
@keyframes siz {
from{width: 0;}
to{width: 100%;}
}
.text{
overflow: hidden;
white-space: nowrap;
letter-spacing: 0.15em;
animation: siz 3s steps(60) forwards;
}
</style>
</head>
<body>
<h1 class="text">半杯可可</h1>
</body>
</html>以上代码就是文字逐字出现效果
三、文字放大缩小效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字缩大缩小</title>
<style>
@keyframes siz {
from{transform: scale(1);}
to{transform: scale(1.5);}
}
.text{
margin-left: 300px;
animation: siz 1s ease-in-out alternate infinite;
}
</style>
</head>
<body>
<h1 class = "text">半杯可可最帅</h1>
</body>
</html>以上代码就是文字放大缩小效果
四、文字从上到下逐子出现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字从上到下出现</title>
<style>
@keyframes siz {
from{transform: translateY(-100%);}
to{transform: translateY(0);}
}
.text{
overflow: hidden;
white-space: pre-wrap;
animation: siz 1s ease-in-out forwards;
}
</style>
</head>
<body>
<h1 class="text">半杯可可最帅</h1>
</body>
</html>以上代码就是文字从上到下逐子出现效果
总结：
以上是几个比较简单的文字动态效果示例，你还可以根据自己的需求和创意进行修改和组合。这些示例多练几遍，然后自己进行创意组合出不同的效果是可以做到的哦！
