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!