CSS3 realizes animation effects through VAR () and calc () functions

Time:2021-9-20

在这里插入图片描述

Preview the knowledge points

  • Animation frame
  • background gradient
  • Use of var() and calc()
  • Flex layout scenario

Start:

Create 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 need to turn the circle, we need 20 small boxes to form our circle box, and add the style style: – I: num to get the following values

Box centered:


*{
      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);
  }

Using the flex layout, 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;
  }

Locate the text and circle box in 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 calculation of degrees 360 / 20 = 18 DEG, because we are 20 circle boxes, each rotation is 18 DEG, and the subsequent superimposed rotation can achieve this effect. However, if the rotation position is not changed, it will rotate directly around the center of the circle box and will not spread out, but directly form a circle.

在这里插入图片描述

This is how the rotating positioning of the circle box comes.

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));

Corresponding to the box shadow, you can set multiple values, which is more dazzling

Add the hover event to stop the 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 CSS3’s animation effects through var() and calc() functions. For more information about CSS animation effects, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!