- 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;
- }
来源: http://www.bubuko.com/infodetail-2962347.html