CSS3文本动画教程

最新推荐文章于 2025-06-04 13:33:27 发布

amohan

最新推荐文章于 2025-06-04 13:33:27 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： css3 ar 前端

原文链接：https://yy123.ink/frontDetail/13109

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这篇博客详细介绍了如何利用CSS创建一种文字动画效果，通过设置关键帧动画(textAnimation)实现文字的淡入淡出和缩放。代码示例中展示了不同延迟时间的文字逐个显示，为网页增添动态视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

HTMLText 1Text 2Text 3Text 4Text 5CSS:.text-animation,.text-animation:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0;}.text-animation li{ z-index: 1000; position: absolute; bottom: 295px; left: 0px; width: 100%; text-align: center; opacity: 0; -webkit-animation: textAnimation 20s linear infinite 0s; -moz-animation: textAnimation 20s linear infinite 0s; -o-animation: textAnimation 20s linear infinite 0s; -ms-animation: textAnimation 20s linear infinite 0s; animation: textAnimation 20s linear infinite 0s;}.text-animation li h3 { font-family: "Open Sans Condensed", sans-serif; text-transform:uppercase; font-size: 240px; padding: 0; line-height: 200px; color:#390;}.text-animation li:nth-child(2){ -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -o-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s;}.text-animation li:nth-child(3){ -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s;}.text-animation li:nth-child(4) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s;}.text-animation li:nth-child(5) { -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s;}.text-animation li:nth-child(6) { -webkit-animation-delay: 20s; -moz-animation-delay: 20s; -o-animation-delay: 20s; -ms-animation-delay: 20s; animation-delay: 20s;}/* Animation for the text */@-webkit-keyframes textAnimation { 0% { opacity: 0; -webkit-transform: translateY(200px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 1; -webkit-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 }}@-moz-keyframes textAnimation { 0% { opacity: 0; -moz-transform: translateY(200px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 1; -moz-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -moz-transform: scale(10); } 100% { opacity: 0 }}@-o-keyframes textAnimation { 0% { opacity: 0; -o-transform: translateY(200px); } 10% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 1; -o-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -o-transform: scale(10); } 100% { opacity: 0 }}@-ms-keyframes textAnimation { 0% { opacity: 0; -ms-transform: translateY(200px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 1; -ms-transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 0 }}@keyframes textAnimation { 0% { opacity: 0; transform: translateY(200px); } 10% { opacity: 1; transform: translateY(0px); } 20% { opacity: 1; transform: scale(1); } 23% { opacity: 0 } 27% { opacity: 0; transform: scale(10); } 100% { opacity: 0 }}

dd: