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

2022-07-04 10:48:16 字數 838 閱讀 2996

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

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

定義 dom,容器表示整隻蝴蝶,因為蝴蝶是對稱的,所以分為左右兩邊,每邊有 3 個子元素:

居中顯示:

body
定義蝴蝶的尺寸:

.butterfly
先畫左半邊:

.butterfly .left
用第 1 個子元素畫出翅膀的上半部分:

.butterfly span 

.butterfly span:nth-child(1)

用第 2 個子元素畫出翅膀的下半部分:

.butterfly span:nth-child(2)
用第 3 個子元素畫出觸角:

.butterfly span:nth-child(3)
把左半邊複製乙份到右半邊:

.butterfly .right 

.butterfly .right

把標本裝到展示框裡:

.butterfly::before 

.butterfly::after

最後,調整一下因圖案傾斜引起的位移:

.butterfly
大功告成!

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

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

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