Click here to see the effect

Accidentally opened 360 home page, want to find what excellent website (such as 7K7K, 4455 miniclip games and so on). Cough cough ~~~ suddenly saw a nice thing:

There are two problems with working on the front end. One is getting used to CTRL + S after editing a sentence.

————————————————————-

Emmmmm strikes again. The other is seeing something strange on your browser and liking to right click – check ing……

┗ | ` O ‘| ┛ ao ~ ~, it seems that he is written in JS ah ~ (who says, jq day first).

So, I have this problem again, such a simple animation can not use CSS to write?

—- do as you say.

Big slag good, I am slag hui!

< div id = "box" > < div class = "font" > greed < / div > < div class = "font" > play < / div > < div class = "font" > blue < / div > < div class = "font" > on < / div > </div> #box { position: relative; font-size: 150px; width: 400px; height: 400px; margin: 50px auto; border: 5px solid #ffb787; border-radius: 5%; overflow: hidden; } #box .font { line-height: 200px; text-align: center; width: 200px; height: 200px; color: red; float: left; }Copy the code

Yi ~~ is so dare sheet, haven’t written on the “feeling” quickly completed!

Come on, it’s just a red square in the background.

<div id="box"> <div class="bg"></div> <! - add a red background - > < div class = "font" > greed < / div > < div class = "font" > play < / div > < div class = "font" > blue < / div > < div class = "font" > on < / div > </div>Copy the code

？？？？？

Originally thought so simple implementation, suddenly found and the final effect deviation ah!

Take a closer look

At the junction of the red background and the text, the text inside the red background is white!!

Headache for some time to think, white background red text is one page, and red background white text is another page.

The red background on top of the white background!!

And the realization of animation, is to rely on the four corners of the box width, height change!

Well, I thought it was too easy. (+_+)? Okay, no panic, no panic now we’re clear, let’s masturbate!

< div id = "box" > < div class = "font" > greed < / div > < div class = "font" > play < / div > < div class = "font" > blue < / div > < div class = "font" > on < / div > < div class = "po1" > < div > greed < / div > < / div > < div class = "po2" > < div > play < / div > < / div > < div class = "po3" > < div > blue < / div > < / div > < div Class ="po4"> <div> </div>Copy the code

For HTML, I added four boxes PO1, PO2, PO3,po4. Set overflow: Hidden for each of the four boxes by controlling their width and height to hide and show the words inside, and position them in the middle, default height and width to 0.

.po1,
.po2,
.po3,
.po4 {
  overflow: hidden;
  position: absolute;
  background: red;
  width: 0;
  height: 0;
}
.po1 {
  right: 200px;
  bottom: 200px;
}
.po2 {
  left: 200px;
  bottom: 200px;
}
.po3 {
  right: 200px;
  top: 200px;
}
.po4 {
  left: 200px;
  top: 200px;
}

.po1 div,
.po2 div,
.po3 div,
.po4 div {
  position: absolute;
  width: 200px;
  text-align: center;
  color: #fff;
}
.po1 div {
  bottom: 0;
  right: 0;
}
.po2 div {
  bottom: 0;
  left: 0;
}
.po3 div {
  right: 0;
  top: 0;
}
.po4 div {
  top: 0;
  left: 0;
}
Copy the code

All right, now all four boxes are positioned in the middle of the box.

Try adding an animation first!

@keyframes w-h {
  0% {    height: 0;    width: 200px;  }
  50% {    height: 200px;    width: 200px;  }
  100% {    height: 200px;    width: 0;  }
}

.po1 {
  animation: w-h 2s infinite linear;
}
.po2 {
  animation: w-h 2s infinite linear;
}
.po3 {
  animation: w-h 2s infinite linear;
}
.po4 {
  animation: w-h 2s infinite linear;
}
Copy the code

That looks interesting

Now let’s adjust the frames of the animation, and the animation delay time and orientation of the four boxes:

@keyframes w-h { 0% { height: 0; width: 200px; } 25% { height: 200px; width: 200px; } 50% { height: 200px; width: 0; }}. Po1 {animation: w-h 2s 0.5s infinite linear; } .po2 { animation: w-h 2s infinite linear reverse; /* reverse */}. Po3 {animation: w-h 2s 1s infinite linear reverse; }. Po4 {animation: w-h 2s 1.5s infinite linear; }Copy the code

Effect:

Ha ha, finally realized it, it seems that some things, really looks simple, write up just know pit point.