Front-end daily combat: # 122 video demonstrates how to create a photo album icon Apple systems with pure CSS

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/zJKwbO

Interactive video

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/cDBZNUW

Source code download

Daily front-end combat series full source code can be downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Reading

Defined dom, a container which contains eight elements, each element represents a rectangular patch:

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

Centered:

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

Is defined container sizes:

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

Draw a rectangular contour (border auxiliary lines will eventually be deleted), and placed on top of the container:

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

Set the index variable is rectangular --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;
}

Let eight rectangular sequentially rotated a fixed angle, around a circular synthesized:

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

Variable rectangular color set --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);
}

Eight rectangular color, and delete play a supporting role in the line of the border:

.icon span {
    /* border: 1px dashed black; */
    background-color: var(--c);
}

Blending mode setting, so that overlapping colors can be superimposed together:

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

Increase mouseover effect, run the rectangle to expand the animation when hovering:

.icon:hover span {
    animation: rotating 2s ease-in-out forwards;
}

@keyframes rotating {
    from {
        transform: rotate(0deg);
    }

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

Note that, the first rectangle and not rotated during the animation, because it is from 0 degrees to 0 degrees, to make it rotates, take it to the ending angle of 360 degrees, by modifying its index variable :

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

We're done!