CSS3 uses var() and calc() functions to achieve animation effects

insert image description here

Preview knowledge points.

Animation Frames
Background Gradient
Use of var() and calc()
Flex layout scenario

Start:

Create the HTML structure:

<section>
    <div class="loading">
      <div class="text"></div>
      <div class="clock" style="--i:1;"></div>
      <div class="clock" style="--i:2;"></div>
      <div class="clock" style="--i:3;"></div>
      <div class="clock" style="--i:4;"></div>
      <div class="clock" style="--i:5;"></div>
      <div class="clock" style="--i:6;"></div>
      <div class="clock" style="--i:7;"></div>
      <div class="clock" style="--i:8;"></div>
      <div class="clock" style="--i:9;"></div>
      <div class="clock" style="--i:10;"></div>
      <div class="clock" style="--i:11;"></div>
      <div class="clock" style="--i:12;"></div>
      <div class="clock" style="--i:13;"></div>
      <div class="clock" style="--i:14;"></div>
      <div class="clock" style="--i:15;"></div>
      <div class="clock" style="--i:16;"></div>
      <div class="clock" style="--i:17;"></div>
      <div class="clock" style="--i:18;"></div>
      <div class="clock" style="--i:19;"></div>
      <div class="clock" style="--i:20;"></div>
    </div>
  </section>

Because we want to spin in circles, we need 20 small boxes to form our circle box, and add style: --i :num so that we can get the value behind it.

Center the box:

*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  section{
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: -webkit-linear-gradient(left top, pink, orange);
  }

Use flex layout to position the box in the center.
background: -webkit-linear-gradient(left top, pink, orange);
This is a gradient background.

Set the loading box size.

.loading{
    position: relative;
    width: 250px;
    height: 250px;
  }

Position the text and circle box inside the loading box.

.loading .text::after{
    content: "Loading";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-size: 24px;
    font-weight:600;
    height: 66px;
    width: 130px;
    text-align: center;
    line-height: 66px;
    transition: all .5s;
    letter-spacing: 2px;
  }
.loading .clock{
    position:absolute;
    left: 50%;
    height: 25px;
    width: 8px;
    background-color:red;
    transform: rotate(calc(18deg * var(--i)));
    transform-origin: 0 125px;
    animation: clock 1.2s linear infinite;
    animation-delay: calc(0.06s * var(--i));
  }

Through var (–i) we can get the num value of i in the tag style.
The degree calculation is 360 / 20 = 18 deg. Because we have 20 circle boxes, each rotates 18 degrees, and the subsequent rotations are superimposed to achieve this effect. But if the rotation position is not changed, it will rotate directly around the center of the circle box and will not disperse, but directly form a circle.

insert image description here

This is how the rotation positioning of the circle box is achieved.

Define animation, add animation

@keyframes clock {
    0%, 50%{
      background-color:pink;
      box-shadow: none;
    }
    50.1%, 100%{
      background-color: red;
      box-shadow: 0 0 5px red,
                  0 0 10px red,
                  0 0 25px red,
                  0 0 40px red;
    }
  }

transform-origin: 0 125px;
    animation: clock 1.2s linear infinite;
    animation-delay: calc(0.06s * var(--i));

For box shadows, you can set multiple values, which makes it more dazzling.

Add Hover event to stop animation

loading .text:hover::after{
    content: "Ended";
    transform: translate(-50%, -50%) translateY(-8px) scale(1.3);
    color: red;
  }
  .loading:hover .clock{
    animation-play-state: paused;
  }

This is the end of this article about how to use CSS3's var() and calc() functions to achieve animation effects. For more relevant CSS animation effects content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of where Docker saves log files

>>: Front-end AI cutting tips (experience)