前端日常实战：38#视频演示如何用纯CSS制作阶梯文字效果

时间：2023-04-05 14:32:27 HTML5

效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可预览全文屏幕。https://codepen.io/comehop??e/pen/MXYBEM互动视频教程本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cEQMJAK源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含1段，段中包含几个词：

stayhungry留傻

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景：黑色；}设置文字样式：.containerp{color:white;字体大小：60px；字体系列：无衬线；字体粗细：粗体；文本转换：大写；}.containerpspan{显示：块；text-align:center;}修改dom，将文本分成2个相邻句子的组，将4个句子分成3组：

stay饿了

饿了留下</span>

stayfoolish

将段落的行高改为1行文字高度，3每段占一行：.containerp{margin:0;高度：1em；overflow:hidden;}.containerpspan{line-height:1em;}让文字倾斜变形：.containerp:nth-child(odd){transform:skewY(-30deg)skewX(45deg)scaleY(1.3333);}.containerp:nth-child(even){transform:skewY(-30deg)scaleY(1.3333);}aligntext:.containerp:nth-child(2){margin-left:1.3em;}.containerp:nth-child(3){margin-left:2.6em;}定义上下移动文本的动画：.containerpspan{animation:lettering3sinfiniteease-in-outalternate;}@keyframeslettering{to{变换：翻译Y（-100%）；}}最后让文字向左偏移，抵消倾斜带来的位移：.containerp{position:relative;left:-0.8em;}大功告成！