How to use pure CSS to realize the photo album icon of Apple system
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!
