如何用純 CSS 創作階梯文字特效

2022-07-04 11:21:12 字數 1042 閱讀 6390

按下右側的「點選預覽」按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。

請用 chrome, safari, edge 開啟**。

定義 dom，容器中包含 1 個段落，段落中包含幾個單詞：

stay


hungry


stay


foolish
居中顯示：

body
設定文字樣式：

.container p 


.container p span
修改 dom，把文字分成每相鄰的 2 句為一組，4 句話一共分成 3 組：

stay


hungry


hungry


stay


stay


foolish
把段落的行高改為 1 行文字高，3 個段落各佔一行：

.container p 


.container p span
讓文字傾斜變形：

.container p:nth-child(odd) 


.container p:nth-child(even)
對齊文字：

.container p:nth-child(2) 


.container p:nth-child(3)
定義讓文字上下移動的動畫：

.container p span 


@keyframes lettering 


}
最後，讓文字偏左一些，抵銷因傾斜造成的位移：

.container p
大功告成！

如何用純 CSS 創作一種文字斷開的互動特效

按下右側的 點選預覽 按鈕在當前頁面預覽，點選鏈結全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，只有乙個元素，元素有乙個 data text 屬性，屬性值等於元素內的文字 break 居中顯示 html,body設定漸變背景色 body設定文字的字型字型大小 text利用...

如何用純 CSS 創作牛奶文字變換效果

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，容器中包含 2 段文字 explorer discovery 居中顯示 body設定字型樣式 p讓 2 段文字重疊 p p nth child 1 p nth chil...

如何用純 CSS 創作一顆逼真的土星

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，容器本身表示土星星球，其中的ring元素表示土星環 居中顯示 body定義容器尺寸 saturn畫出土星星球 此為草稿，後面還會細化 saturn saturn bef...