怎么用纯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实现苹果系统的相册图标”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！