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

2022-07-04 13:03:10 字數 1052 閱讀 7861

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

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

定義 dom，只有乙個元素，元素有乙個 data-text 屬性，屬性值等於元素內的文字：

break
居中顯示：

html, body
設定漸變背景色：

body
設定文字的字型字型大小：

.text
利用偽元素增加文字：

.text 


.text::before,


.text::after
設定左側文字的遮罩：

.text::before
設定右側文字的背景和遮罩：

.text::after
當滑鼠劃過時，遮罩的文字分別向兩側偏移：

.text::before,


.text::after 


.text:hover::before 


.text:hover::after
隱藏輔助元素，包括原始文字和偽元素的背景色：

.text 


.text::before 


.text::after
兩側文字增加歪斜效果：

.text:hover::before 


.text:hover::after
微調文字的高度：

.text:hover::before 


.text:hover::after
大功告成！

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

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，容器中包含 1 個段落，段落中包含幾個單詞 stay hungry stay foolish 居中顯示 body設定文字樣式 container p container...

如何用純 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...