前言：要实现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>

以上代码就是文字从上到下逐子出现效果

总结：

以上是几个比较简单的文字动态效果示例，你还可以根据自己的需求和创意进行修改和组合。这些示例多练几遍，然后自己进行创意组合出不同的效果是可以做到的哦！

CSS几种常见的文字动态效果相关推荐

CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
css几种常见的单位
css几种常见的单位 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在 ...
html span字体旋转,几种常见的文字排列方向代码(倒向、竖向和旋转)
文字排列特效 1.文字逆时针转90度人之初性本善 2.中文竖向排列,从右往左读: 模板无忧(mb5u.com)提供各类编程源码.视频教程.JavaScript/CSS特效代码以及常用软件下载等 ...
css 几种常见的百分比设置和使用，百分比是相对哪个元素或属性的比例
前端写样式时我们为了满足自适应通常会使用百分比来设置元素的宽高间距等,只有明确的知道设置百分比是相对哪个元素的哪个属性而言的才能正确的得到期望的效果. 说在前面,包含块的W3C解释 1.width:相 ...
css 水平垂直居中的几种常见方式
下面是几种常见的水平垂直居中方式,可在不同情形下方便采用不同的方式 html <body><div class="box"><div class=&q ...
html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
什么是css选择器？css3中5种常见的基本选择器-web前端教程
本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
5 种常见的 CSS 布局，快看看你会几种？
作者 | 浪里行舟责编 | 胡巍巍本文将介绍如下几种常见的布局: 其中实现三栏布局有多种方式,本文着重介绍圣杯布局和双飞翼布局.另外几种可以猛戳实现三栏布局的几种方法. 单列布局常见的单列布局有 ...

CSS几种常见的文字动态效果