纯CSS实现苹果系统的相册图标

目标

一、定义图标容器

定义一个容器：

<div class="icon">
</div>

居中显示：

body{
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ccc;
}

使用flex布局做左右和垂直居中

定义icon容器的尺寸：

.icon{
    width: 10em;
    height: 10em;
    background-color: #eee;
    border-radius: 20%;
    font-size: 30px;
}

图标容器

二、画出花瓣矩形

为图标容器填入花瓣：

<div class="icon">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

绘制出矩形的轮廓，并放置在容器的中上方：

.icon{
    padding: 1em;
    position: relative;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}
.icon span{
    position: absolute;
    width: 22.5%;
    height: 37.5%;
    border: 1px dashed black;
    border-radius: 50% / 30%;
}

画出的效果图：

花瓣效果

因为使用了flex布局，八个span会排成一行，由于容器宽度不够（8*22.5%）,所以宽度会缩小，然后排成一行。使用position:absolute;使他们重叠在一起，宽度是22.5%。

三、花瓣散开

• 扩展-CSS变量
  CSS自定义属性也被称为CSS变量，在CSS中可以通过--设置CSS变量和通过var(--varName)访问已声明的变量。
  可以像下面声明一个变量和让文本的颜色为red：

div { 
    --color: red; 
    color: var(--color); 
}

我们需要给八个花瓣设置适当的旋转角度，使它们能够散开，且恰好围成一朵花。

先以两瓣花为例：

.icon span{
    transform-origin: center;
    transform: rotate(calc((var(--n) - 1) * 45deg));
}

.icon span:nth-child(1) {
    --n: 1;
}

.icon span:nth-child(2) {
    --n: 2;
}

花瓣旋转
现在是旋转后的样子，由于他们之间重叠部分太多了，所以需要调整一下位置。
transform-origin: x-axis y-axis z-axis;
调整Y轴到一个差不多的位置，最终为：

.icon span{
    transform-origin: center 105%;
    transform: rotate(calc((var(--n) - 1) * 45deg));
}

此时效果：

调整后

现在八瓣都旋转一下，设置下标变量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;
}

效果图：

八瓣花瓣旋转

四、填色

为花瓣设置颜色：

.icon span{
   // border: 1px dashed black;
    background-color: var(--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);
}

填充颜色

设置混色模式，使重叠颜色能叠加在一起：

.icon span {
    mix-blend-mode: multiply;
}

颜色叠加

明显设置颜色叠加后效果要更好一点。

五、扩展动画

到这里，基本上想要的效果已经出来了，但是还可以做少许的扩展——鼠标悬停时花瓣展开。

.icon:hover span{
    animation: rotating 2s ease-in-out forwards;
}
@keyframes rotating {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(calc((var(--n) - 1) * 45deg));
    }
}

此时可以看到效果，这里只截取了展开的一部分：

花瓣展开

仔细观察可以发现，第一瓣花瓣始终没有动，因为我们设置的旋转角度中，把它忽略掉了，如果想要展开时每个花瓣都动，可以将第一瓣花瓣设置为：

.icon span:nth-child(1) {
    --n: 9;
}

这样它的结束角度就变成了 360 度，这样的话每个花瓣都可以动起来了。但在实际情况中，如果不是需求必须，其实不太影响。

源码请点：
苹果系统相册图标

系列文章：
「色卡」

【敬请期待】