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 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
Recommend
Running PostgreSQL in Docker and recommending several connection tools
1 Introduction PostgreSQL is a free software obje...
Steps to create your own YUM repository
To put it simply, the IP of the virtual machine u...
How to deploy code-server using docker
Pull the image # docker pull codercom/code-server...
Analyze the role of rel="nofollow" in HTML and the use of rel attribute
Adding the rel="nofollow" attribute to ...
50 lines of code to implement Webpack component usage statistics
background Recently, a leader wanted us to build ...
Practical method of deleting a row in a MySql table
First, you need to determine which fields or fiel...
MySQL trigger usage scenarios and method examples
trigger: Trigger usage scenarios and correspondin...
How to remove carriage return characters from text in Linux
When the carriage return character ( Ctrl+M ) mak...
Detailed steps for installing and debugging MySQL database on CentOS7 [Example]
This example requires downloading and installing ...
mysql5.5.28 installation tutorial is super detailed!
mysql5.5.28 installation tutorial for your refere...
Elegant practical record of introducing iconfont icon library into vue
Table of contents Preface Generate SVG Introducti...
Solution to the problem of var in for loop
Preface var is a way to declare variables in ES5....
Example of how to achieve semi-transparent background image and opaque content in CSS3
I encountered this problem when I was making the ...
Solution to 1045 error when navicat connects to mysql
When connecting to the local database, navicat fo...
Web page text design should be like smart girls wearing clothes
<br />"There are no ugly women in the w...