本篇文章給大家帶來的內容是關於如何使用CSS實現蘋果系統的相簿表徵圖(代碼) ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。
效果預覽
原始碼下載
https://github.com/comehope/front-end-daily-challenges
代碼解讀
定義 dom,容器中包含 8 個元素,每個元素代表一個矩形色塊:
<div class="icon"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span></div>
置中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #ccc;}
定義容器尺寸:
.icon { width: 10em; height: 10em; font-size: 30px; background-color: #eee; border-radius: 20%;}
繪製出矩形的輪廓(邊框為輔助線,最終會被刪除),並放置在容器的中上方:
.icon { position: relative; display: flex; justify-content: center; box-sizing: border-box; padding: 1em;}.icon span { position: absolute; width: 22.5%; height: 37.5%; border: 1px dashed black; border-radius: 50% / 30%;}
為矩形設定下標變數 --n
:
.icon span:nth-child(1) { --n: 1;}.icon span:nth-child(2) { --n: 2;}.icon span:nth-child(3) { --n: 3;}.icon span:nth-child(4) { --n: 4;}.icon span:nth-child(5) { --n: 5;}.icon span:nth-child(6) { --n: 6;}.icon span:nth-child(7) { --n: 7;}.icon span:nth-child(8) { --n: 8;}
讓 8 個矩形依次旋轉固定的角度,圍合成一個圓形:
.icon span { transform-origin: center 105%; transform: rotate(calc((var(--n) - 1) * 45deg));}
為矩形設定顏色變數 --c
:
.icon span:nth-child(1) { --c: rgba(243, 156, 18, 0.7);}.icon span:nth-child(2) { --c: rgba(241, 196, 15, 0.7);}.icon span:nth-child(3) { --c: rgba(46, 204, 113, 0.7);}.icon span:nth-child(4) { --c: rgba(27, 188, 155, 0.7);}.icon span:nth-child(5) { --c: rgba(65, 131, 215, 0.7);}.icon span:nth-child(6) { --c: rgba(102, 51, 153, 0.7);}.icon span:nth-child(7) { --c: rgba(155, 89, 182, 0.7);}.icon span:nth-child(8) { --c: rgba(242, 38, 19, 0.7);}
為 8 個矩形上色,並刪除掉起輔助線作用的邊框:
.icon span { /* border: 1px dashed black; */ background-color: var(--c);}
設定混色模式,使重疊顏色能疊加在一起:
.icon span { mix-blend-mode: multiply;}
增加滑鼠移至上方效果,當懸停時運行矩形色塊展開的動畫:
.icon:hover span { animation: rotating 2s ease-in-out forwards;}@keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(calc((var(--n) - 1) * 45deg)); }}
注意,在動畫過程中第 1 個矩形並沒有轉動,因為它是從 0 度轉到 0 度,為了讓它轉動,要把它的結束角度設定為 360 度,通過修改它的下標變數來實現:
.icon span:nth-child(1) { --n: 9;}
大功告成!