How to use pure CSS to implement an Apple System album icon (code)

This article brings you the content is about how to use CSS to implement the Apple System album icon (code), there is a certain reference value, a friend who needs to refer to, I hope to help you.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains 8 elements, each of which represents a rectangular color block:

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

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color: #ccc;}

Define Container Dimensions:

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

Draw the outline of the rectangle (the border is the guide line, which will eventually be deleted), and place it in the 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%;}

To set the subscript variable for a rectangle --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 the 8 rectangles rotate a fixed angle in turn to synthesize a circle:

. Icon span {    transform-origin:center 105%;    Transform:rotate (Calc ((Var (--n)-1) * 45deg));

To set a color variable for a rectangle --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);}

Color the 8 rectangles and remove the border that is acting as a guide:

. Icon span {    /* border:1px dashed black; *    /Background-color:var (--C);}

Set the process color mode so that overlapping colors can be stacked together:

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

Increase the mouse hover effect when you hover over the animation that runs the rectangular color block expansion:

. 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 1th rectangle does not rotate during the animation because it is going from 0 degrees to 0 degrees, in order for it to turn, to set its end angle to 360 degrees, by modifying its subscript variable to achieve:

. Icon Span:nth-child (1) {    --n:9;}

Done!