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

2022-07-04 13:21:14 字數 729 閱讀 6937

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

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

定義 dom，只有乙個容器元素：
居中顯示：

html, body
畫出電池的主體輪廓：

.battery
畫出電池的突起：

.battery 


.battery::after
畫出充電電量：

.battery
定義和應用動畫效果：

@keyframes charge 


to }.battery
最後，把動畫的時間函式由線性變化改為步長變化：

.battery
大功告成！

linear-gradient()

background-size

background-position

steps()

currentcolor

border-radius

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

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

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

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

如何用純 CSS 創作乙個蝴蝶標本展示框

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，容器表示整隻蝴蝶，因為蝴蝶是對稱的，所以分為左右兩邊，每邊有 3 個子元素 居中顯示 body定義蝴蝶的尺寸 butterfly先畫左半邊 butterfly left...