This is the 10th day of my participation in the “Gold Digging Day New Plan Β· April More text Challenge”. Click here for more details.

Hello, everyone, my name is Small Dudu, we know that constitute the front end of the three languages are: HTML, CSS and JS, CSS is the role of the page layout, beautiful, so you know only through CSS can achieve very cool animation?

Let’s take a look at one of the cool effects: charging the phone. The overall effect can be seen at the bottom

Pre-knowledge:

In order to complete this effect, there are some attributes that must be known in advance. Here are a few:

animation

Animation: An animation property that can be written coherently or separately (preceded by animation-), as in:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Copy the code
  • Name: The name of the keyframe bound to the selector
  • Duration: Specifies how many seconds or milliseconds the animation takes to complete
  • Timing-function: Sets how the animation will complete a cycle
  • Delay: Sets the delay interval before animation starts.
  • Rotund-count: Defines the number of times an animation is played.
  • Direction: Specifies whether the animation should take turns playing backwards.
  • Fill-mode: Specifies the style to apply to the element when the animation does not play (when the animation is complete, or when the animation has a delay before it starts playing).
  • Play-state: Specifies whether the animation is running or paused.

In the command, you need to call @keyframes to define the name. The value can be 0% to 100%

transform

Transform: Used for 2D or 3D transformations of elements. This property allows you to rotate, scale, move, tilt, etc.

  • translate(x, y): Defines the transformation of 2d graphics, respectively x and y
  • roate(90deg): Defines the rotation of a 2D graph in degrees, such as 90 degrees

filter

Filter: The filter property, which makes things blur

  • blur(5px): Set the image to Gaussian blur. Radius “sets the standard deviation of the Gaussian function, or how many pixels are fused together on the screen, so larger values are more blurry;
  • contrast(%): Adjust the contrast of the image. If it’s 0 percent, it’s going to go completely black. The value is 100%. The graph stays the same. Values can exceed 100%, meaning lower comparisons will be applied. If no value is set, the default value is 1.
  • hue-rotate(deg): Apply hue rotation to the image. Give a certain spin character a ring Angle

Charging ball

Let’s start with a ball, and let it move from the bottom, like the top, and cycle through it, and set the interval for the ball

.contrast {
  span{
      animation: moveUp ease-in-out infinite;
      animation-duration: 4s;
      animation-delay: 2s; }}@keyframes moveUp {
  0% {
      bottom: 0;
  }

  100% {
      bottom: calc(100% - 265px); }}Copy the code

Bottom sit

The base can be set casually, using the border-radius attribute at both corners

But we found that if this is popped up like this, it will be very monotonous, it feels like the ball is not connected to the base, and then we need an effect: fusion

The fusion results

This is done through the filter attribute. It is easy to add: filter: contrast() to the parent element and filter:blur() to the child element

Here, add both the base and the ball, create multiple balls at the same time, and change the position, interval and speed of the ball

 .contrast{
     filter: contrast(15) hue-rotate(0);
     span{
         filter: blur(5px);
     }
     .button{
         filter: blur(5px); }}Copy the code

Take a look at the results:

ring

First we need to make a square and make a circle in the middle. The circle in the middle will match the background color of Beijing as a whole, like this:

After that, we changed the rounded corner of the lower box through border-radius, and then added the effect of the upper filter to make it blurred and form a fusion effect with the small ball, like this:

Finally, rotate it by setting up an animation:

.circle {
    box-sizing: border-box;
    filter: blur(8px);
    animation: circleRotate 6s linear infinite;
}
@keyframes circleRotate {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg); }}Copy the code

Effect:

Add color

In order to look good, we can also control the price and color, and move the corresponding text into the circle, and the effect is complete

.contrast{
    animation: hueRotate 6s linear infinite;
}
@keyframes hueRotate {
  0% {
      filter: contrast(15) hue-rotate(0);
  }

  100% {
      filter: contrast(15) hue-rotate(360deg); }}Copy the code

Detailed code

  • index.tsx
import React from 'react';

import './index.less'

const Index:React.FC<any> = ({app, dispatch}) = > {

  return (
    <div className="Index">
      <div className="text">73%</div>
      <div className="contrast">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>{/* Bottom */}<div className="circle"></div> 
        {/* δΈ‹ι’ηš„ */}
        <div className="button"></div>
      </div>
    </div>
  );
}

export default Index;
Copy the code
  • index.less
.Index {
  width: 100vw;
  height: 100vh;
  background: # 000;
  position: relative;
  .text{
    width: 200px;
    height: 200px;
    text-align: center;
    z-index: 9;
    font-size: 30px;
    line-height: 200px;
    color: white;
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translate(-50%.0%);
  }
  .contrast{
    width: 100%;
    height: 100%;
    background-color: # 000;
    overflow: hidden;
    filter: contrast(15) hue-rotate(0);
    position: relative;
    animation: hueRotate 6s linear infinite;
    span{
      background: #00ff6f;
      position: absolute;
      bottom: 0;
      border-radius: 100px 100px 0 0;
      filter: blur(5px);
      animation: moveUp ease-in-out infinite;
      &:nth-child(1) {
        width: 20px;
        height: 20px;
        left: 50%;
        animation-duration: 4s;
        animation-delay: 2s;
      }
      &:nth-child(2) {
        width: 22px;
        height: 22px;
        left: 54%;
        animation-duration: 4.2 s;
        animation-delay: 4s;
      }
      &:nth-child(3) {
        width: 24px;
        height: 24px;
        left: 45%;
        animation-duration: 3s;
        animation-delay: 1s;
      }
      
      &:nth-child(4) {
        width: 20px;
        height: 22px;
        left: 54%;
        animation-duration: 5s;
        animation-delay: 0s;
      }
      &:nth-child(5) {
        width: 22px;
        height: 22px;
        left: 52%;
        animation-duration: 3.5 s;
        animation-delay: 5s;
      }
      &:nth-child(6) {
        width: 20px;
        height: 20px;
        left: 50%;
        animation-duration: 4.7 s;
        animation-delay: 1.2 s;
      }
      
      &:nth-child(7) {
        width: 22px;
        height: 22px;
        left: 54%;
        animation-duration: 2.5 s;
        animation-delay: 3.5 s;
      }
      
      &:nth-child(8) {
        width: 24px;
        height: 24px;
        left: 51%;
        animation-duration: 5.6 s;
        animation-delay: 4.2 s;
      }
      &:nth-child(9) {
        width: 26px;
        height: 26px;
        left: 42%;
        animation-duration: 5.2 s;
        animation-delay: 4s;
      }
      &:nth-child(10) {
        width: 26px;
        height: 22px;
        left: 54%;
        animation-duration: 3.8 s;
        animation-delay: 4.3 s;
      }
      &:nth-child(11) {
        width: 22px;
        height: 22px;
        left: 42%;
        animation-duration: 4.2 s;
        animation-delay: 0.3 s;
      }
      
      &:nth-child(12) {
        width: 24px;
        height: 24px;
        left: 46%;
        animation-duration: 4.6 s;
        animation-delay: 2.0 s;
      }
      
      &:nth-child(13) {
        width: 22px;
        height: 22px;
        left: 48%;
        animation-duration: 3.8 s;
        animation-delay: 3.2 s;
      }
      &:nth-child(14) {
        width: 26px;
        height: 22px;
        left: 55%;
        animation-duration: 5.2 s;
        animation-delay: 2.9 s;
      }
      &:nth-child(15) {
        width: 26px;
        height: 22px;
        left: 52%;
        animation-duration: 4.9 s;
        animation-delay: 4.2 s; }}.button {
      width: 150px;
      height: 50px;
      background: #00ff6f;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%.0);
      border-radius: 100px 100px 0 0;
      filter: blur(5px); }}.circle {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -150px;
    box-sizing: border-box;
    filter: blur(8px);
    animation: circleRotate 6s linear infinite;
    &::before{
      content: "";
      height: 200px;
      width: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0);
      background: #00ff6f;
      border-radius: 42% 38% 62% 49% / 45%;
    }
    &::after {
      content: "";
      width: 176px;
      height: 178px;
      background: # 000;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }}}@keyframes hueRotate {
  0% {
      filter: contrast(15) hue-rotate(0);
  }

  100% {
      filter: contrast(15) hue-rotate(360deg); }}@keyframes circleRotate {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg); }}@keyframes moveUp {
  0% {
      bottom: 0;
  }

  100% {
      bottom: calc(100% - 265px); }}Copy the code

End

I have to say that CSS is really amazing. The effect is as real as possible. If you like, click like πŸ‘πŸ» and support it.