一些最流行的 CSS 文本动画
一些最流行的 CSS 文本动画
让我们向您展示这些流行的 CSS 文本动画是如何工作的
什么是动画？
动画是一种按顺序创建动作的方法。
什么是 CSS 动画？
CSS 动画用于动画从一种 CSS 样式配置到新样式的过渡。这背后的想法是使用 CSS 创建 Text 元素的动画。让我们看看其中一些动画和实现它们的代码。
一些最受欢迎的设计示例包括：
删除文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
</style>
</head>
<body>
<div class="wrapper one">
<div class="drop-main">
<div class="d">D</div>
<div class="r">R</div>
<div class="o">○</div>
<div class="p">磷</div>
<div class="s">！</div>
</div>
</div>
</body>
</html>
CSS
.wrapper.one {
背景颜色：#1a1a1a；
}
.drop-main {
显示：弯曲；
字体大小：7rem；
保证金：1.5rem；
证明内容：中心；
font-family: "Russo One", sans-serif;
}
.d {
不透明度：0；
动画：直线向前下降 0.4s；
颜色：#00ffff；
}
.r {
不透明度：0；
动画：下降 0.4s 线性向前 0.2s；
颜色：#99ffff；
}
.o {
不透明度：0；
动画：下降 0.4s 线性向前 0.4s；
颜色：#ccffff；
}
.p {
不透明度：0；
动画：下降 0.4s 线性向前 0.6s；
颜色：#ffffff；
}
.s {
不透明度：0；
动画：下降 0.4s 线性向前 0.8s；
颜色：#de4040；
}
@keyframes 删除 {
0% {
变换：translateY（-200px）；
不透明度：0；
}
50% {
变换：translateY（0px）；
不透明度：1；
}
65% {
变换：translateY（-17px）；
不透明度：1；
}
75% {
变换：translateY（-22px）；
不透明度：1；
}
100% {
变换：translateY（0px）；
不透明度：1；
}
}
霓虹文字
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper two">
<div class="neon">
<h3>氖</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.two {
背景颜色：#2c0101；
字体大小：6rem；
字体系列：“播放”，无衬线；
}
.霓虹灯h3 {
保证金：1rem auto；
动画：霓虹灯1s缓动无限；
}
@keyframes 霓虹灯{
0%,
100% {
文本阴影：0 0 10px #ef00e3a8, 0 0 20px #ef00e3a8, 0 0 20px #ef00e3a8, 0 0 20px #ef00e3a8, 0 0 2px #fed128, 2px 2px 2px #806914;
颜色：#f5efcb；
}
50% {
文字阴影：0 0 2px #800e0b，0 0 5px #800e0b，0 0 5px #800e0b，0 0 5px #800e0b，0 0 2px #800e0b，4px 4px 2px #40340a；
颜色：#eda0d3；
}
}
文本背后的移动背景
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');
</style>
</head>
<body>
<div class="wrapper three">
<div>
<h3>气球</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.三{
背景颜色：#010c3d；
}
.三个h3 {
font-family：“牧场主”，草书；
背景：网址（https://drive.google.com/uc?export=view&id=1qvnbL55D_X7Bzo6fwwtXNyjhBhgi1iyX）；
保证金：1.5rem；
显示：inline-flex；
字体大小：10rem；
背景位置：0 0；
-webkit-background-clip：文本；
-webkit-文本填充颜色：#5b728a54；
动画：animatedOne 30s 线性无限；
}
@keyframes 动画一个 {
从 {
背景位置：0 0；
}
至 {
背景位置：100% 0；
}
}
键入文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper four">
<div class="type">
<h3 class="typing">打字效果</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.四{
背景颜色：#9ba5b4；
字体大小：3rem；
字体系列：“播放”，无衬线；
}
.四 .type{
填充：2rem 1rem；
宽度：自动；
边距：自动；
}
.四个h3 {
宽度：13ch；
右边框：4px 纯黑色；
保证金：2rem auto；
空白：nowrap；
溢出：隐藏；
动画：输入 2s steps(13, end)，blink-caret 0.5s step-end 无限交替；
}
@-webkit-keyframes 输入 {
从 {
宽度：0；
}
}
@-webkit-keyframes 闪烁插入符号 {
50% {
边框颜色：透明；
}
}
浮动文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper five">
<span class="float-box">
<h3 class="float">漂浮</h3>
</span>
</div>
</body>
</html>
CSS
.wrapper.5 {
背景颜色：#99bec8；
字体大小：3rem；
字体系列：“播放”，无衬线；
}
.浮动框{
保证金：汽车；
变换样式：preserve-3d；
变换原点：左；
变换：透视（100px）旋转Y（10度）；
}
。漂浮 {
动画：浮动2s线性无限；
保证金：3.5 rem auto；
填充：1rem；
背景：#5a9bad；
颜色：#ffffff；
盒子阴影：-20px -17px 8px 0px #5a9bad63;
}
@keyframes 浮动 {
0% {
变换：翻译（0%，30%）；
}
50% {
变换：翻译（0%，-30%）；
}
100% {
变换：翻译（0%，30%）；
}
}
闪烁文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Merienda:[[email protected]](/cdn-cgi/l/email-protection);700&display=swap');
</style>
</head>
<body>
<div class="wrapper six">
<div>
<h3 class="flicker">闪烁</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.六{
背景颜色：#222222；
}
.闪烁{
字体大小：6rem；
字体系列：'Merienda'，无衬线；
保证金：1rem auto；
颜色：#fffefe61；
背景：-webkit-gradient（线性，左上，右上，从（#e6e6e6），到（#1d1c1c），颜色停止（0.8，#ffffff））不重复；
背景：渐变（线性，左上，右上，从（#222），到（#222），颜色停止（0.8，#fff））不重复；
背景尺寸：110px 100%；
-webkit-background-clip：文本；
背景剪辑：文本；
动画：轻弹1.5s无限；
}
@keyframes 轻弹 {
0% {
背景位置：左上角；
}
100% {
背景位置：右上角；
}
}
消失文字
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
</style>
</head>
<body>
<div class="wrapper seven">
<div>
<h3 class="text">
<span>消失</span>
</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.7 {
背景颜色：#e66f40；
}
.七> div{
宽度：自动；
保证金：1rem auto；
}
.七.文本{
字体大小：6rem；
保证金：1rem auto；
颜色：#e5e5e5；
}
.文本跨度{
font-family: 'Indie Flower'，草书；
行高：0；
动画：消失4s 2s都无限；
}
@keyframes 消失{
50% {
文字阴影：0 0 40px #cbc7c7;
}
至 {
文字阴影：0 0 20px #cbc7c7;
不透明度：0；
}
}
烟雾文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper eight">
<h3 class="smoke">
<span>小号</span>
<span>米</span>
<span>○</span>
<span>ķ</span>
<span>乙</span>
</h3>
</div>
</body>
</html>
CSS
.wrapper.8 {
字体大小：6rem；
背景颜色：#000000；
溢出：隐藏；
颜色：透明；
}
.八 .smoke {
保证金：3rem auto；
显示：inline-flex；
}
.八跨度{
显示：inline-flex；
文字阴影：0 0 0 #f5f5f5;
字体系列：“播放”，无衬线；
动画：smoke 5s ease无限；
} @keyframes 烟雾 {
60% {
文字阴影：0 0 40px #f5f5f5;
}
至 {
变换： translate3d(12rem, -10rem, 0) skewX(50deg);
文字阴影：0 0 20px #f5f5f5;
不透明度：0；
}
} .八跨度：第n个类型（1）{
动画延迟：3.1s；
}
.八跨度：第n个类型（2）{
动画延迟：3.2s；
}
.八跨度：第n个类型（3）{
动画延迟：3.3s；
}
.八跨度：第n个类型（4）{
动画延迟：3.4s；
}
.八跨度：第n个类型（5）{
动画延迟：3.5s；
}
旋转文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
</style>
</head>
<body>
<div class="wrapper nine">
<div>
<h3 class="rotate">
<span>R</span>
<span>0</span>
<span>吨</span>
<span>一个</span>
<span>吨</span>
<span>乙</span>
</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.9 {
背景颜色：#09715d；
字体系列：'Arvo'，衬线；
}
.旋转跨度{
字体大小：5rem；
颜色：#f8f8f8；
显示：inline-flex；
动画：无限旋转2s；
}
@keyframes 旋转 {
0%,
75% {
变换：旋转Y（360度）；
}
}
.九跨度：第n个类型（1）{
动画延迟：0.2s；
}
.九跨度：第n个类型（2）{
动画延迟：0.4s；
}
.九跨度：第n个类型（3）{
动画延迟：0.6s；
}
.九跨度：第n个类型（4）{
动画延迟：0.8s；
}
.九跨度：第n个类型（5）{
动画延迟：1s；
}
.九跨度：第n个类型（6）{
动画延迟：1.2s；
}
反弹文本
代码片段：
HTML
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
</style>
</head>
<body>
<div class="wrapper ten">
<div>
<h3 class="bounce">
<span>乙</span>
<span>0</span>
<span>ü</span>
<span>ñ</span>
<span>C</span>
<span>乙</span>
</h3>
</div>
</div>
</body>
</html>
CSS
.wrapper.ten {
背景颜色：#0e2839；
}
.反弹{
字体大小：5rem；
宽度：100%；
保证金：3rem auto；
显示：inline-flex；
证明内容：中心；
-webkit-box-reflect：低于 -20px 线性渐变（透明，#211e1e2e）；
}
.反弹跨度{
显示：inline-flex；
颜色：#c7f4ff；
字体系列：“播放”，无衬线；
动画：弹跳1s无限；
}
@keyframes 弹跳{
0%,
50%,
100% {
变换：translateY(0)；
}
25% {
变换：translateY（-20px）；
}
}
.十跨度：第n个类型（1）{
动画延迟：0.1s；
}
.十跨度：第n个类型（2）{
动画延迟：0.2s；
}
.十跨度：第n个类型（3）{
动画延迟：0.3s；
}
.十跨度：第n个类型（4）{
动画延迟：0.4s；
}
.十跨度：第n个类型（5）{
动画延迟：0.5s；
}
.十跨度：第n个类型（6）{
动画延迟：0.6s；
}
您还可以从这里访问更多资源[ Codepen 链接](https://codepen.io/shivprasad/pen/abEqvBv)
结论
希望这篇文章成功地使 CSS 动画更清晰，并引发了有关如何实现它们的新想法。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
