如何用純 CSS 創作一台拍立得照相機

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

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

定義 dom，容器中包含 2 個元素，分別代表鏡頭和**：

居中顯示：

body

畫出相機的輪廓：

.camera

畫出鏡頭的輪廓：

.camera .lens

用線性漸變畫出下方**的出口：

.camera

接下來修飾細節。

用偽元素畫出相機的取景器和閃光燈：

.camera::before .camera::after

用徑向漸變畫出相機上的按鈕：

.camera

用徑向漸變畫出鏡頭上的光影：

.lens

接下來製作動畫效果。

用偽元素模擬快門：

.lens::before, .lens::after .lens::before .lens::after

增加快門開合動畫效果：

.lens::before, .lens::after @keyframes take-a-photo 20%

}

畫出**：

.picture .picture::before

增加列印**的動畫效果：

.picture 
@keyframes print 
80%, 100% 
}

最後，把相機向上挪一點，保持垂直居中：

.camera

大功告成！

按下右側的點選預覽按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟定義 dom，容器本身表示土星星球，其中的ring元素表示土星環居中顯示 body定義容器尺寸 saturn畫出土星星球此為草稿，後面還會細化 saturn saturn bef...

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

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