如何用純 CSS 創作乙隻徘徊的果凍怪獸

2022-09-18 14:18:16 字數 989 閱讀 5663

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

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

定義 dom，容器中包含 2 個元素，分別代表怪獸的身體和眼睛：
設定背景色：

body
設定前景色：

.monster
畫出怪獸的身體：

.monster 


.body
定義怪獸眼睛所在的容器：

.eyes
用偽元素畫出怪獸的眼睛：

.eyes::before,


.eyes::after 


.eyes::before 


.eyes::after
為怪獸定義輕輕跳起的動畫，結合後面的動畫效果，讓它具有果凍的彈性：

.body 


@keyframes bounce 


}
讓怪獸的身體轉動起來：

@keyframes w**e 


}
讓怪獸徘徊行走：

.monster 


.body 


.eyes 


@keyframes wander 


}
最後，讓怪獸的眼睛眨一眨：

.eyes::before,


.eyes::after 


@keyframes blink 


7%, 37% 


}
大功告成！

純 CSS 創作乙隻憤怒小鳥中的黑炮

blackbombinangrybirds.html blackbombinangrybirds.css 居中顯示 body black bomb 偽元素的共同屬性 black bomb before,black bomb after 畫出頭部輪廓 black bomb head 用偽元素畫出眼睛的...

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