怎么用純CSS實(shí)現(xiàn)蘋(píng)果系統(tǒng)的相冊(cè)圖標(biāo)

小編給大家分享一下怎么用純CSS實(shí)現(xiàn)蘋(píng)果系統(tǒng)的相冊(cè)圖標(biāo)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　　代碼解讀

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

　　<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%;

　　}

　　繪制出矩形的輪廓（邊框?yàn)檩o助線，最終會(huì)被刪除），并放置在容器的中上方：

　　.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%;

　　}

　　為矩形設(shè)置下標(biāo)變量--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個(gè)矩形依次旋轉(zhuǎn)固定的角度，圍合成一個(gè)圓形：

　　.iconspan{

　　transform-origin:center105%;

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

　　}

　　為矩形設(shè)置顏色變量--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個(gè)矩形上色，并刪除掉起輔助線作用的邊框：

　　.iconspan{

　　/*border:1pxdashedblack;*/

　　background-color:var(--c);

　　}

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

　　.iconspan{

　　mix-blend-mode:multiply;

　　}

　　增加鼠標(biāo)懸停效果，當(dāng)懸停時(shí)運(yùn)行矩形色塊展開(kāi)的動(dòng)畫(huà)：

　　.icon:hoverspan{

　　animation:rotating2sease-in-outforwards;

　　}

　　@keyframesrotating{

　　from{

　　transform:rotate(0deg);

　　}

　　to{

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

　　}

　　}

　　注意，在動(dòng)畫(huà)過(guò)程中第1個(gè)矩形并沒(méi)有轉(zhuǎn)動(dòng)，因?yàn)樗菑?度轉(zhuǎn)到0度，為了讓它轉(zhuǎn)動(dòng)，要把它的結(jié)束角度設(shè)置為360度，通過(guò)修改它的下標(biāo)變量來(lái)實(shí)現(xiàn)：

　　.iconspan:nth-child(1){

　　--n:9;

　　}

以上是“怎么用純CSS實(shí)現(xiàn)蘋(píng)果系統(tǒng)的相冊(cè)圖標(biāo)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！