前端日常实战：56#视频演示如何用纯CSS来描述程序员的生活
时间：2023-04-05 19:36:42
HTML5
效果预览按右边“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/YvYVvY互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cN6L9SZ源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含6段，每段1行代码：functionrepeat(){
eat();
sleep();
code();
repeat();
}
中心显示：body{保证金：0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；}代码布局：.code{背景色：银色；填充：1em0；字体大小：24px；字体系列：等宽字体；border-radius:0.5em;}.codep{white-space:pre;填充：01em；margin:0.5em;}定义动画:.codep:not(:last-child){animation:step2sinfinite;}@keyframesstep{0%,25%{color:white;背景色：道奇蓝；}26%,100%{颜色：黑色；背景颜色：透明；}}设置动画延迟，描述单步执行场景：.codep:not(:last-child){animation-delay:var(--d);}.codep:nth-child(2){--d:0s;}.codep:nth-child(3){--d:0.5s;}.codep:nth-child(4){--d:1s;}.codep:nth-child(1),.codep:nth-child(5){--d:1.5s;}伟大的成就！
