如何用純 CSS 創作乙個跳動的字母 i

2022-09-18 14:18:15 字數 565 閱讀 5705

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

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

定義 dom,只有乙個元素:

居中顯示:

body
定義容器尺寸:

.loader
畫出字母 i 的形狀:

.loader 

.loader::before

.loader::after

增加下部矩形的旋轉效果:

.loader::after 

@keyframes rect-rotating

100%

}

增加上部小球的跳動效果:

.loader::before 

@keyframes ball-jumping

50%

}

大功告成!

如何用純 CSS 創作乙個充電 loader 特效

按下右側的 點選預覽 按鈕在當前頁面預覽,點選鏈結全屏預覽。請用 chrome,safari,edge 開啟 定義 dom,只有乙個容器元素 居中顯示 html,body畫出電池的主體輪廓 battery畫出電池的突起 battery battery after 畫出充電電量 battery定義和應...

如何用純 CSS 創作乙個小球反彈的動畫

按下右側的 點選預覽 按鈕可以在當前頁面預覽,點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom,只有 1 個元素 居中顯示 body定義容器尺寸 box用偽元素畫出小球 box box before 定義沿 x 軸即橫向移動的動畫效果 keyframes move...

如何用純 CSS 創作乙個方塊旋轉動畫

按下右側的 點選預覽 按鈕可以在當前頁面預覽,點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom,容器中包含 4 個元素 居中顯示 body畫出容器中心的方塊 loader畫出容器四周的方塊 loader,loader span loader span nth ch...