Front end daily combat work 175: pure CSS Yin Yang pattern

Time:2021-6-16

Front end daily combat work 175: pure CSS Yin Yang pattern

Yin and Yang is a simple and broad concept of ancient Chinese philosophy. Whether there is mutual generation, it is difficult and easy to form, long and short, and high and low. This is the binary system invented by our great ancestors, so you programmers should learn more about it.

Effect preview

Press the “click preview” button on the right to preview in the current page, and click the link to preview in full screen.

https://codepen.io/comehope/pen/RwRNdLj

Source code download

Please download all the source code of front-end combat series from GitHub:

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

Code interpretation

1、 Define DOM structure

This is a single element work, DOM structure is very simple, only a class namedyin-yangOfdivElements.

<div class="yin-yang"></div>

2、 Define container

Set the page background to light gray.

body {
    margin: 0;
    height: 100vh;
    background-color: lightgrey;
}

The size of the container is defined as a square in relative unitsemIn order to see the space occupied by the container, fill the container with white temporarily.

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yin-yang {
    width: 10em;
    height: 10em;
    font-size: 20px;
    background-color: white;
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

3、 Yin Yang pattern composition

Comment out the temporary settings just nowbackground-colorProperty, set the background color of the container with a sharp linear gradient, and divide the container background with two colors. Because these two colors will be used later, we use variables--color1and--color2To represent them for reuse. Yin Yang pattern was originally black and white, in the development stage, in order to facilitate observation, we temporarily use tomato color and orange instead.

.yin-yang {
    /*background-color: white;*/
    --color1: tomato;
    --color2: orange;
    background-image: linear-gradient(var(--color1) 50%, var(--color2) 50%);
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

Next, draw the pattern in the middle. First, draw the one on the left, which is implemented with pseudo elements. Its background color is a variable--color1The color of, through the flex layout to make it vertical center.mix-blend-modeThe function of attribute is to prevent the color of pseudo elements from being mixed with the background color, which is called “mixed mode”. You can refer to it if you are interestedMDN documentAnd personally experiment with the effect of various mode values.

.yin-yang {
    display: flex;
    align-items: center;
}

.yin-yang::before {
    content: '';
    width: 50%;
    height: 50%;
    background-color: var(--color1);
    mix-blend-mode: screen;
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

Set a thick border for the pseudo element. The border uses variables--color2It’s the same color.

.yin-yang::before {
    box-sizing: border-box;
    border: 1.5em solid var(--color2);
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

Now look at the square elements, and then round, if you are in a hurry, you can addborder-radius: 50%;Attribute to see the effect.
Next, put::beforeThe effect of pseudo elements is copied to::afterPseudo element, directly in the pseudo element selector.yin-yang::afterThat’s it.
The only difference between the two pseudo elements is that their color matching is opposite, so we define their color matching attribute values as--inner-colorand--outer-color, which refers to the color of the inner and outer borders of an element.

.yin-yang::before,
.yin-yang::after {
    background-color: var(--inner-color);
    border: 1.5em solid var(--outer-color);
}

.yin-yang::before {
    --inner-color: var(--color1);
    --outer-color: var(--color2);
}

.yin-yang::after {
    --inner-color: var(--color2);
    --outer-color: var(--color1);
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

4、 Undo auxiliary properties and coloring

OK, now make them all round.

.yin-yang,
.yin-yang::before,
.yin-yang::after {
    border-radius: 50%;
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

Cancels the color blending mode attribute used for auxiliary developmentmix-blend-mode

.yin-yang::before,
.yin-yang::after {
    /*mix-blend-mode: screen;*/
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

Then change the color to black and white. So far, the static layout of Yin Yang diagram is completed.

.yin-yang {
    /*--color1: tomato;
    --color2: orange;*/
    --color1: white;
    --color2: black;
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
}

The effect is as follows:
Front end daily combat work 175: pure CSS Yin Yang pattern

5、 Increase animation effect

Finally, we add a rotating animation to illustrate the mutual transformation of yin and Yang, and the endless meaning of dynamic balance.

.yin-yang {
    animation: rotating linear 5s infinite;
}

@keyframes rotating {
    to {
        transform: rotate(1turn);
    }
}

be accomplished!

About the author

Zhang Biao, network pseudonym @ comehope, was caught by the infinite charm of the web at the end of the 20th century, and has been fighting in the front line of web development ever since.

The column “front end daily practice” is my notes of practicing project-based learning in recent years. It uses project driven learning to show the whole process from inspiration flash to code implementation. It can also be used as practice exercises and development reference for front-end development.

Front end daily combat work 175: pure CSS Yin Yang pattern

My book “CSS3 art” was published by the people’s Posts and Telecommunications Publishing House in January 2020, full-color printing, using more than 100 vivid and beautiful examples, systematically analyzes the important syntax of CSS and visual effects, and contains nearly 10 hours of video demonstration. Jingdong / tmall / Dangdang are on sale.