Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

So far 1024 programmer festival, as a programmer worker, can only give yourself a little fun, to relax yourself.

Today, I decided to use 1024 theme to do a loading effect. Lele alone is not as good as lele 😂😂.

Results show

The HTML code

Import React from 'React' import './index.less' export default () => {// Use 1024 digits to generate digits return (<div className="wrap">  <i className="number first">1</i> <i className="number second">0</i> <i className="number third">2</i> <i className="number fourth">4</i> </div> ) }Copy the code

CSS code

.wrap { width: 100px; position: fixed; top: 30%; // Center it left: calc(50%-50px); .number { font-size: 28px; color: #1890ff; display: inline-block; width: 24px; text-align: center; // run animation-timing-function: linear; // animation-restage-count: infinite; // Set the execution period to 1s animation-duration: 1s; } .first { animation-name: scale; // animation-duration: 1s; animation-delay: -1s; } .second { animation-name: scale; // animation-duration: 1s; animation-delay: -.85s; } .third { animation-name: scale; // animation-duration: 1s; animation-delay: -.7s; } .fourth { animation-name: scale; // animation-duration: 1s; Animation - delay: 0.55 s; }} @keyframes scale {0% {transform: scale(0.6); } 25% {transform: scale(0.8); } 50% { transform: scale(1); } 75% {transform: scale(0.8); } 100% {transform: scale(0.6); }}Copy the code

Implementation logic

  1. HTML uses the numbers 1, 0, 2, 4.
  2. Set the width of each digit to be fixed24px
  3. Place the loading effect in the middle of the screen with a fixed position
  4. Sets the keyframes for each animationscaleAnd make it change from small to large and from large to small
  5. Set the animation for each numberanimation

Animation setup tips

For continuous animation, we can set the animation state to animation-play-state: pause to determine the position of the first frame and the animation style.

Animation-delay A negative value causes the animation to start moving immediately from the time represented by the current positive number

conclusion

If this article helped you, please like 👍 and follow ⭐️.

If there are any errors in this article, please correct them in the comments section 🙏🙏.