前端日常实践：140#视频演示如何使用纯CSS制作文字淡入动画效果
时间：2023-03-30 18:59:26
CSS
效果预览点击右侧“点击预览”按钮可在当前页面进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/ZMwgqK互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cJB3rAN源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含几个子元素，每个子元素是一个字母：happyholidays
中心显示：body{保证金：0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(pink,white,pink);}设置字体样式：.containerspan{display:inline-block;颜色：紫色；字体粗细：粗体；文本转换：大写；font-size:40px;}定义文字从左向右移动的效果：.containerspan{animation:sideSlide4s向前无限;transform:translateX(-100vw);}@keyframessideSlide{15%,20%{transform:translateX(0.5em);}24%{转换：translateX(0);}25%,75%{变换:translateX(0);}90%,100%{变换:translateX(100vw);}}增加文字缩放的动画效果：.containerspan{transform:translateX(-100vw)scale(0);}@keyframessideSlide{15%,20%{transform:translateX(0.5em)scale(1);}24%{transform:translateX(0)scale(1.2);}25%,75%{transform:translateX(0)scale(1);}90%,100%{转换：translateX(100vw)scale(0);}}增加文本进出时的淡入淡出效果：.containerspan{filter:opacity(0);}@keyframessideSlide{15%,20%{transform:translateX(0.5em)scale(1);}24%{transform:translateX(0)scale(1.2);}25%,75%{转换：translateX(0)scale(1);过滤器：不透明度（1）；}90%,100%{变换:translateX(100vw)scale(0);过滤器：不透明度（0）；}}增加文字颜色的效果：@keyframessideSlide{15%,20%{transform:translateX(0.5em)scale(1);颜色：紫色；}24%{transform:translateX(0)scale(1.2);颜色：青色；}25%,75%{转换：translateX(0)scale(1);过滤器：不透明度（1）；颜色：紫色；}90%,100%{转换：translateX(100vw)scale(0);过滤器：不透明度（0）；}}设置子元素的下标量：.containerspan:nth-child(1){--n:1;}.containerspan:nth-child(2){--n:2;}.containerspan:nth-child(3){--n:3;}.containerspan:nth-child(4){--n:4;}.containerspan:nth-child(5){--n:5;}.containerspan:nth-child(6){--n:6;}.containerspan:nth-child(7){--n:7;}.containerspan:nth-child(8){--n:8;}.containerspan:nth-child(9){--n:9;}.containerspan:nth-child(10){--n:10;}.containerspan:nth-child(11){--n:11;}.容器小号pan:nth-child(12){--n:12;}.containerspan:nth-child(13){--n:13;}.containerspan:nth-child(14){--n:14;}为子元素设置动画延迟：.containerspan{animation-delay:calc((var(--n)-1)*0.05s);}大功告成！
