Hello, this is my first CSS widget
I have never seen many labels before, so I specially spent a whole afternoon to study them, such as the flex model and use, the use of selector and the layout of DIV. I have learned a lot. Here is my code, I hope I can practice it, and it is really different to write it by myself.
There is also a very good article about the Flex model that I recommend
Flex In-depth Analysis – Solve mobile adaptation problems!
<pre> <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; border: 0px; box-sizing: border-box; Rotate: rotate(0deg); rotate: rotate(0deg); rotate: rotate(0deg); rotate: rotate(0deg); rotate: rotate(0deg); /* start */} to{transform: rotate(360deg); /* end */}} #big{height: 100vh; /* align-items: center; justify-content: center; flex-direction: column; display: flex; } #wrapper{ width: 500px; height: 500px; margin:0 auto; display: flex; border-radius: 50%; position: relative; overflow: hidden; */ animation: x 10s infinite linear; } #black{flex:1;} #black{flex:1; height: 500px; background-color: black; Box-shadow: 3px 3px 3px rgba(255,255,255,.2)} #white{flex:1; height: 500px; background-color: white; Box-shadow: 3px 3px 3px rgba(0,0,0,.2)} #wrapper> div:nth-child(3){width: 250px; height: 250px; border-radius: 50%; background-color: black; position: absolute; left:25%; top:0px; } #wrapper> div:nth-child(4){ width: 250px; height: 250px; border-radius: 50%; background-color: white; position: absolute; left:25%; bottom: 0px; } #wrapper >div:nth-child(5){width: 62.5px; Height: 62.5 px; border-radius: 50%; background-color: black; position: absolute; left:50%; Margin-left: -31.25px; margin-left: -31.25px; /* The way to get the middle of the small circle to the middle of the father */ bottom: 25%; Margin - bottom: 31.25 px; } #wrapper >div:nth-child(6){width: 62.5px; Height: 62.5 px; border-radius: 50%; background-color: white; position: absolute; left:50%; Margin - left: 31.25 px; top: 25%; Margin - top: 31.25 px; } p{ font-size: 2em; } #introduce{ margin-top: 1em; } </style> </head> <body> <div id="big"> <div id="wrapper"> <div id="black"></div> <div id="white"></div> <div></div> The < div > < / div > < div > < / div > < div > < / div > < div > < / div > < / div > < div id = "introduce" > < p > rotation of the eight diagrams < / p > < / div > < / div > < / body > < / HTML >Copy the code