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

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.