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

Use CSS to achieve circular wave effect

TypeScript namespace merging explained

Detailed explanation of built-in methods of javascript array

Practice of dynamically creating dialog according to file name in vue+el-element

The iframe child page operates the parent page and implements the effect of shielding the page pop-up layer

VUE implements bottom suction button

How to build svn server in linux

The difference and usage of LocalStorage and SessionStorage in vue

The difference between absolute path and relative path in web page creation

How to automatically delete records before a specified time in Mysql

WeChat applet implements a simple calculator

Recommend

How to use bar charts in Vue and modify the configuration yourself

IDEA complete code to connect to MySQL database and perform query operations

Detailed explanation of long transaction examples in MySQL

Detailed explanation of several commands in Linux to obtain detailed hardware information

Detailed explanation of how to use amoeba to implement read-write separation of MySQL database

Linux uses join -a1 to merge two files

Vue3 AST parser-source code analysis

CSS to achieve chat bubble effect

Steps to install GRUB on Linux server

Summary of the characteristics of SQL mode in MySQL

Detailed explanation of inline elements and block-level elements in commonly used HTML tags

How to completely delete the MySQL 8.0 service under Linux

SQL to implement time series dislocation restoration case

Zabbix implements monitoring of multiple mysql processes

JS ES6 asynchronous solution