Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure CSS to achieve the Apple system photo album icon, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Code interpretation

Define dom. The container contains 8 elements, each of which represents a rectangular color block:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:#ccc

}

Define the container size:

.icon {

Width:10em

Height:10em

Font-size:30px

Background-color:#eee

Border-radius:20%

}

Draw the outline of the rectangle (the border is a guide and will eventually be deleted) and place it at the top of the container:

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

}

Set the subscript variable for the rectangle-- n:

.iconspan:nth-child (1) {

-- nRO 1

}

.iconspan:nth-child (2) {

-- nRO 2

}

.iconspan:nth-child (3) {

-- nRO 3

}

.iconspan:nth-child (4) {

-- nRO 4

}

.iconspan:nth-child (5) {

-- nRO 5

}

.iconspan:nth-child (6) {

-- nRO 6

}

.iconspan:nth-child (7) {

-- nRO 7

}

.iconspan:nth-child (8) {

-- nRO 8

}

Let the eight rectangles rotate at a fixed angle in turn to form a circle:

.iconspan {

Transform-origin:center105%

Transform:rotate (calc ((var (--n)-1) * 45deg))

}

Set the color variable for the rectangle-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)

}

Color the 8 rectangles and remove the borders that act as guides:

.iconspan {

/ * border:1pxdashedblack;*/

Background-color:var (--c)

}

Set the blending mode so that overlapping colors can be superimposed:

.iconspan {

Mix-blend-mode:multiply

}

Increase the mouse hover effect to run the animation of the rectangular color block expansion when hovering:

.icon: hoverspan {

Animation:rotating2sease-in-outforwards

}

@ keyframesrotating {

From {

Transform:rotate (0deg)

}

To {

Transform:rotate (calc ((var (--n)-1) * 45deg))

}

}

Note that the first rectangle does not rotate during the animation, because it rotates from 0 degrees to 0 degrees. In order for it to rotate, set its end angle to 360 degrees, which is achieved by changing its subscript variable:

.iconspan:nth-child (1) {

-- nRO 9

}

The above is all the content of the article "how to implement the photo album icon of Apple system with pure CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.