38.純 CSS 創作階梯文字特效
阿新 • • 發佈:2019-02-21
play get transform back ive 文字 cas clas position
原文地址: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 創作階梯文字特效