This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

🙇 preface

  • We always add some transition effects to guide the user while the page is loading to reduce the white screen time, but the loading effect can be usedsvgYou can also use some of the components that we’ve encapsulated, and I’m going to share one today.”Firm but gentle“Loading effect.
  • I believe you all know the effect from the cover, so let’s go straight to work.

🏋 ️ came ️ ToDoList

  • Shock wave shape
  • Firm but gentle turn
  • Combination of firm but gentle

🚴 Just Do It

  • In fact, a careful look at the effect is that there are three elements similar to circular rings for rotation, we only need to disassemble a ring to do the effect, and then combine the three rings.

Shock wave shape

  • Look carefully at a sword qi, its shape is not very much like a round sickle divided into half, and this sickle we can do by the border and rounded corners.
  • First, prepare a prototype of swordsmanship.
  <div class="sword">
    <span>
  </div>
Copy the code
  • We only need to add a direction to a circle frame can be made into a semicircle shape, so that the shape of the semicircle similar to the sword qi is completed 🌪️.
.sword {
  position: relative;
  margin: 200px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.sword span{
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}
.sword :first-child{
  left: 0%;
  top: 0%;
  border-bottom: 3px solid #EFEFFA;
}
Copy the code

Firm but gentle turn

  • Because we need the swordsman to keep rotating, we can usecsstheanimationThe animation property can then add an animation to it.
  • animationProperty is a shorthand property that can be used to set the following animation properties respectively:
    • animation-name: Specifies the name of the keyframe to bind to the selector
    • animation-duration: The animation specifies how many seconds or milliseconds it takes to complete
    • animation-timing-functionHow will the animation complete a cycle
    • animation-delay: Sets the delay interval before animation starts
    • animation-iteration-count: Defines the number of times an animation is played
    • animation-direction: Specifies whether the animation should take turns playing backwards
    • animation-fill-mode: Specifies the style to be applied to an element when the animation is not playing
    • animation-play-state: Specifies whether the animation is running or paused
  • Learn more about animation from MDN
..sword :first-child{
  ...
  animation: sword-one 1slinear infinite; . }@keyframes sword-one {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg); }}...Copy the code
  • We can give a constant loopzshaft0degto360degThe rotation animation is set to complete once a second in an infinite loop. Let’s look at the effect:

  • And then I’m going to go around this semi-arc separatelyxAxis andyThe axis can also rotate a certain Angle to complete the rotation of a sword.
.@keyframes sword-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }}...Copy the code
  • Let’s take a look at the finished result:

Combination of firm but gentle

  • In the end we just need to make two moreFirm but gentleJust put it together.
<div class="sword">
    <span></span>
    <span></span>
    <span></span>
  </div>
Copy the code
  • Two for the new onesspanAdd animations and styles.
..sword :nth-child(2) {right: 0%;
  top: 0%;
  animation: sword-two 1s linear infinite;
  border-right: 3px solid #EFEFFA;
}

.sword :last-child{
  right: 0%;
  bottom: 0%;
  animation: sword-three 1s linear infinite;
  border-top: 3px solid #EFEFFA;
}

@keyframes sword-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }}@keyframes sword-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }}...Copy the code
  • So our sword loading effect is made good, the above is all the code, like you can take to use yo.
  • Let’s take a look at the final result

👋 is at the end

  • First of all, thank you for seeing thisFirm but gentleLoading effect, hope to help students in need.
  • If you feel that this article has helped to your words might as well 🍉 attention + likes + favorites + comments + forward 🍉 support yo ~~😛 your support is the biggest power OF my update.

🌅 past wonderful

A “water” button 💧

Product Manager: Can you get the word cloud moving?

Fix echarts map rotation highlighting ⚡

Read still not clear redraw and rearrangement come over beat me 👊, I say!!