怎么用純CSS實現蘋果系統的相冊圖標

小編給大家分享一下怎么用純CSS實現蘋果系統的相冊圖標，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　代碼解讀

　　定義dom，容器中包含8個元素，每個元素代表一個矩形色塊：

　　<divclass="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;

　　}

　　.iconspan{

　　position:absolute;

　　width:22.5%;

　　height:37.5%;

　　border:1pxdashedblack;

　　border-radius:50%/30%;

　　}

　　為矩形設置下標變量--n：

　　.iconspan:nth-child(1){

　　--n:1;

　　}

　　.iconspan:nth-child(2){

　　--n:2;

　　}

　　.iconspan:nth-child(3){

　　--n:3;

　　}

　　.iconspan:nth-child(4){

　　--n:4;

　　}

　　.iconspan:nth-child(5){

　　--n:5;

　　}

　　.iconspan:nth-child(6){

　　--n:6;

　　}

　　.iconspan:nth-child(7){

　　--n:7;

　　}

　　.iconspan:nth-child(8){

　　--n:8;

　　}

　　讓8個矩形依次旋轉固定的角度，圍合成一個圓形：

　　.iconspan{

　　transform-origin:center105%;

　　transform:rotate(calc((var(--n)-1)*45deg));

　　}

　　為矩形設置顏色變量--c：

　　.iconspan:nth-child(1){

　　--c:rgba(243,156,18,0.7);

　　}

　　.iconspan:nth-child(2){

　　--c:rgba(241,196,15,0.7);

　　}

　　.iconspan:nth-child(3){

　　--c:rgba(46,204,113,0.7);

　　}

　　.iconspan:nth-child(4){

　　--c:rgba(27,188,155,0.7);

　　}

　　.iconspan:nth-child(5){

　　--c:rgba(65,131,215,0.7);

　　}

　　.iconspan:nth-child(6){

　　--c:rgba(102,51,153,0.7);

　　}

　　.iconspan:nth-child(7){

　　--c:rgba(155,89,182,0.7);

　　}

　　.iconspan:nth-child(8){

　　--c:rgba(242,38,19,0.7);

　　}

　　為8個矩形上色，并刪除掉起輔助線作用的邊框：

　　.iconspan{

　　/*border:1pxdashedblack;*/

　　background-color:var(--c);

　　}

　　設置混色模式，使重疊顏色能疊加在一起：

　　.iconspan{

　　mix-blend-mode:multiply;

　　}

　　增加鼠標懸停效果，當懸停時運行矩形色塊展開的動畫：

　　.icon:hoverspan{

　　animation:rotating2sease-in-outforwards;

　　}

　　@keyframesrotating{

　　from{

　　transform:rotate(0deg);

　　}

　　to{

　　transform:rotate(calc((var(--n)-1)*45deg));

　　}

　　}

　　注意，在動畫過程中第1個矩形并沒有轉動，因為它是從0度轉到0度，為了讓它轉動，要把它的結束角度設置為360度，通過修改它的下標變量來實現：

　　.iconspan:nth-child(1){

　　--n:9;

　　}

以上是“怎么用純CSS實現蘋果系統的相冊圖標”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！