原文地址：https://segmentfault.com/a/1190000015107942
HTML code：
<div class="container"> ???<p> ???????<span>stay</span> ???????<span>hungry</span> ???</p> ???<p> ???????<span>hungry</span> ???????<span>stay</span> ???</p> ???<p> ???????<span>stay</span> ???????<span>foolish</span> ???</p></div>
CSS code:
html, body { ???margin: 0; ???padding: 0; ???height: 100vh; ???display: flex; ???justify-content: center; ???align-items: center; ???background: black;}/* 把段落的行高改为 1 行文本高，3 个段落各占一行 */.container p { ???color: white; ???font-size: 30px; ???font-family: sans-serif; ???font-weight: bold; ???text-transform: uppercase; ???margin: 0; ???height: 1em; ???overflow: hidden; ???/* 让文字偏左一些，抵销因倾斜造成的位移 */ ???position: relative; ???left: -0.8em;}.container p span{ ???display: block; ???text-align: center; ???line-height: 1em; ???/* 定义让文字上下移动的动画 */ ???animation: lettering 3s infinite ease-in-out alternate;}@keyframes lettering { ???to { ???????transform: translateY(-100%); ???}}/* 让文字倾斜变形 */.container p:nth-child(odd){ ???transform: skewY(-30deg) skewX(45deg) scaleY(1.3333);}.container p:nth-child(even){ ???transform: skewY(-30deg) scaleY(1.3333);}/* 对齐文字 */.container p:nth-child(2){ ???margin-left: 1.3em;}.container p:nth-child(3) { ???margin-left: 2.6em;}38.纯 CSS 创作阶梯文字特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10409910.html