“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

“The magic of love goes round and round, thinking of you and feeling elated night and day, but I fear that love is only for a moment, and will disappear in an instant…” Hey guys, come with me!

What the hell? This is a computer class, not a music class.

Are you sure it’s not mechanics?

Well, not too much. It’s just a wheel.

Look at the picture, how are mechanical class ah, but our course, only need to use HTML + CSS to achieve its effect, so or computer class, want to music class, mechanical class can leave first.

Let’s get back to the basics and explain the examples

Let’s start with a wheel

We must think, gear tooth tooth how to achieve?

It’s actually pretty easy to draw, but if you look at the code below

<div id="loading">
  <div class="gear1">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
Copy the code

Add CSS

#loading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#loading .gear1{
  position: relative;
  width: 100px;
  height: 100px;
}
#loading .gear1> div{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
}
#loading .gear1 div:first-child{
  background: pink;
  transform: rotate(120deg);
}
#loading .gear1 div:nth-child(2) {background: blueviolet;
  transform: rotate(240deg);
}
#loading .gear1 div:nth-child(3) {background: greenyellow;
}
Copy the code

Resolution:

1. Simply wrap a single element around three square child elements that are 100px wide and high

2, the child elements with absolute positioning, and respectively rotate 0°, 120°, 240° (360° / 3 elements)

// transform: rotate Element rotation transform:rotate(120deg);
Copy the code

3, a square has 4 angles, 3 squares are 12 angles (12 saw teeth)

4, we can set the rectangle Angle is rounded, the serrations are not so sharp

#loading .gear1> div{
  border-radius: 10px;
}
Copy the code

5, color or all use the same color, so that the effect is better

#loading .gear1> div{...background: pink;
}
#loading .gear1 div:first-child{
  transform: rotate(120deg);
}
#loading .gear1 div:nth-child(2) {transform: rotate(240deg);
}
Copy the code

Next, empty his body (wow, you’re dirty…).

Hollow gear

Direct pseudo – class, horizontal and vertical center can be

#loading .gear1:after{
  position: absolute;
  content: ' ';
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copy the code

Spin, gear

@keyframes rotate{
  from{
    transform:rotate(0deg)}to{
    transform:rotate(360deg)}}#loading .gear1{...animation: rotate 5s infinite linear
}
Copy the code

Rotate starts with 0 and ends with 360. Rotate once in 5 seconds. Infinite executes permanently and Linear executes at a constant speed

Copy the wheels

Duplicate the wheels above and adjust their position, blue to fan, pink to yellow, and note which way they rotate

summary

Don’t try to empty his body well, what have you learned from this chapter?

Rotate (deG) Transform: Rotate (deG)

2. Use of CSS pseudo-classes

3. Center HTML elements horizontally and vertically

Animation syntax, etc

If you have any questions, please leave them in the comments section. Need source partners can buy, private letter I oh.

Thank you all for your continued support.

The source address