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

Editor to share with you how to use pure css to achieve Taiji hermaphroditic fish animation, I believe most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Start the operation

A pole is divided into four pieces, a round head, a belly, a tail, and a separate circle.

The first circle is transparent in the middle.

The second piece is connected to it, so it has to be changed in order not to obscure the circle in the middle of the first piece.

Change the fillet attribute to a semicircle in the upper right corner, add a radial gradient, and change the origin to center on the left and adjust the percentage of transparency.

The anode structure code is as follows:

The anode css code is as follows:

Main {

Width:500px

Height:500px

Position:absolute

Top:100px

Left:500px

Transform:rotateX (- 20deg)

}

Main section:nth-of-type (1) {

Width:250px

Height:250px

Position:absolute

Bottom:0

Right:0

Border-bottom-right-radius:500px

Background:radial-gradient (circle at 0% 50% meme 44.6% meme 284070%)

}

Main section:nth-of-type (2) {

Width:250px

Height:250px

Position:absolute

Top:0

Right:0

Border-top-right-radius:500px

Background:radial-gradient (circle at 0% 50% meme 44.6% meme 284070%)

}

Main section:nth-of-type (3) {

Width:250px

Height:250px

Position:absolute

Top:0

Left:125px

Border-radius:50%

Background:radial-gradient (circle at center,transparent 62.5px journal 284070%)

}

Main section:nth-of-type (4) {

Width:125px

Height:125px

Background:#284070

Position:absolute

Bottom:62.5px

Left:187.5px

Border-radius:50%

}

The anode effect is as follows:

The cathode structure code is as follows:

The cathode css code is as follows:

Article {

Width:500px

Height:500px

Position:absolute

Top:100px

Left:500px

Transform:rotateX (- 20deg)

}

Article aside:nth-of-type (1) {

Width:250px

Height:250px

Position:absolute

Bottom:0

Left:0

Border-bottom-left-radius:500px

Background:radial-gradient (circle at 100% 50% meme 44.6% meme 889090%)

}

Article aside:nth-of-type (2) {

Width:250px

Height:250px

Position:absolute

Top:0

Left:0

Border-top-left-radius:500px

Background:radial-gradient (circle at 100% 50% meme 44.6% meme 889090%)

}

Article aside:nth-of-type (3) {

Width:250px

Height:250px

Position:absolute

Bottom:0

Left:125px

Border-radius:50%

Background:radial-gradient (circle at center,transparent 62.5px and 8890900%)

}

Article aside:nth-of-type (4) {

Width:125px

Height:125px

Background:#889090

Position:absolute

Top:62.5px

Left:187.5px

Border-radius:50%

}

The cathode effect is as follows:

Effect picture of anode and cathode:

Convert the 2d plane to 3D code as follows:

Body {transform-style:preserve-3d; background:#000; perspective:1800px;}

The effect of converting a 2d plane to 3D is as follows:

Create animation keyframes and add animation attribute codes:

Anode animation keyframes:

@ keyframes mv1 {

0% {

Transform:rotateX (45deg) rotateY (30deg) rotateZ (0deg)

}

50% {

Transform:rotateX (45deg) rotateY (30deg) rotateZ (- 180deg)

}

100% {

Transform:rotateX (45deg) rotateY (30deg) rotateZ (- 360deg)

}

}

Add the animation attribute code to the anode:

Main {

Transform:rotateX (45deg) rotateY (30deg)

Animation:mv1 2.5s linear infinite

}

Cathode animation keyframes:

@ keyframes mv2 {

0% {

Transform:rotateX (45deg) rotateY (- 30deg) rotateZ (0deg)

}

50% {

Transform:rotateX (45deg) rotateY (- 30deg) rotateZ (- 180deg)

}

100% {

Transform:rotateX (45deg) rotateY (- 30deg) rotateZ (- 360deg)

}

}

Add the animation attribute code to the cathode:

Article {

Transform:rotateX (45deg) rotateY (- 30deg)

Animation:mv2 2.5s linear infinite

}

The above is all the content of this article "how to use pure css to realize Taiji Yin and Yang fish animation". 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.