Use CSS to achieve circular wave effect

I often see some circular wave graphics on mobile devices to display the amount. At first I thought this effect could only be created using canvas, but later I found that it could also be created using CSS.

Principle: We all know that setting border-radius:50% will turn it into a circle. If it is less than 50%, it will actually become an irregular circle. We can take advantage of this feature and use pseudo-classes plus transform animation to achieve a wave effect.

Let’s take a look at the effect diagram first:

//css code

.wave {
        position: relative; 
    width: 200px;
    height: 200px;
    background: @color;
    border: 5px solid #76daff;
    border-radius: 50%;
    overflow: hidden;
}
.wave-box::before,
.wave-box::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 400px;
      height: 400px;
      border-radius: 45%;
      -webkit-transform: translate(-50%, -70%);
      transform: translate(-50%, -70%);
      background: rgba(255, 255, 255, 0.5);
      -webkit-animation: rotate 10s linear infinite;
      animation: rotate 10s linear infinite;
      z-index: 10;
}
@keyframes rotate {
  50% {
            -webkit-transform: translate(-50%, -75%) rotate(180deg);
            transform: translate(-50%, -75%) rotate(180deg);
  }
  100% {
            -webkit-transform: translate(-50%, -70%) rotate(180deg);
            transform: translate(-50%, -70%) rotate(180deg);
  }
}
//Or it is more convenient to use a precompiled language, here we use less
.wave(@width; @height; @color) {
    position: relative; 
    width: @width;
    height: @height;
    background: @color;
    border: 5px solid @color;
    border-radius: 50%;
    overflow: hidden;
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: @width * 2;
        height: @height * 2;
        border-radius: 45%;
        transform: translate(-50%, -70%);
        background: rgba(255,255,255,0.5);
        animation: rotate 10s linear infinite;
        z-index: 10;
    }
    &::after {
        border-radius: 47%;
        background: rgba(255,255,255,0.5);
        animation: rotate 10s linear -5s infinite;
        z-index: 20;
    }
}
//Call .wave-box {
    .wave(200px; 200px; #76daff);
}
<!-- Called on the page -->
<div class="wave-box"></div>

Summarize

The above is what I introduced to you about using CSS to achieve circular wave effects. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: A brief discussion on the synchronization solution between MySQL and redis cache

>>: Web standards learning to understand the separation of structure and presentation

Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage

Use CSS to achieve circular wave effect

Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage

IIS7 IIS8 http automatically jumps to HTTPS (port 80 jumps to port 443)

Introduction to TypeScript interfaces

Detailed example of Linux all-round system monitoring tool dstat

Docker Data Storage Volumes Detailed Explanation

Introduction to Docker containers

A brief talk about Rx responsive programming

Detailed explanation of views in MySQL

Uniapp implements DingTalk scan code login sample code

What is the relationship between Mapper sql statement fields and entity class attribute names

Recommend

Introduction to adding new users to MySql, creating databases for users, and assigning permissions to users

Detailed explanation of achieving high availability of eureka through docker and docker-compose

Docker deployment and installation steps for Jenkins

Ubuntu installation Matlab2020b detailed tutorial and resources

Teach you the detailed process of using Docker to build the Chinese version of gitlab community

15 important variables you must know about MySQL performance tuning (summary)

Docker learning method steps to build ActiveMQ message service

Python connects to the database MySQL decompressed version installation configuration and encountered problems

Use CSS to set the width of INPUT in TD

XHTML tags have a closing tag

JavaScript implementation of the Game of Life

MySQL slow query optimization: the advantages of limit from theory and practice

Detailed explanation of FTP server configuration and 425 error and TLS warning solutions for FileZilla Server

XHTML Getting Started Tutorial: Commonly Used XHTML Tags

The handler PageHandlerFactory-Integrated has a bad module ManagedPipelineHandler in its module list