Example code for implementing the wavy water ball effect using CSS
|
Today I learned a new CSS special effect, the wave water ball effect, which is also very beautiful
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/water polo effect.css">
</head>
<body>
<div class="main">
<div class="wave">
</div>
</div>
</body>
</html>CSS:
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: linear-gradient(rgb(95,95,250)10%,rgb(3,3,110));
}
.main,.wave{
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.main{
border:3px solid darkturquoise;
padding: 10px;
}
.wave{
background: darkturquoise;
overflow: hidden;
}
.wave:after{
content: "";
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.8);
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,-60%);
border-radius: 40%;
animation: wave 5s linear infinite;
}
.wave::before{
content:"waterball";
position: absolute;
left: 50%;
top: 0;
color: darkturquoise;
z-index: 99;
transform: translate(-50%,30px);
}
@keyframes wave{
100%{
transform: translate(-50%,-60%) rotate(360deg);
}
}Summarize This concludes this article about sample code for implementing the waving water polo effect with CSS. For more relevant CSS waving water polo content, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Thoughts on copy_{to, from}_user() in the Linux kernel
>>: Detailed explanation of four types of MySQL connections and multi-table queries
Recommend
Solve the problem that line-height=height element height but text is not vertically centered
Let me first explain why the text is not vertical...
MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)
This article shares with you the graphic tutorial...
Detailed explanation of docker-machine usage
Docker-machine is a Docker management tool offici...
Using keras to judge SQL injection attacks (example explanation)
This article uses the deep learning framework ker...
A brief analysis of the differences between px, rem, em, vh, and vw in CSS
Absolute length px px is the pixel value, which i...
MySQL turns off password strength verification
About password strength verification: [root@mysql...
Tips on setting HTML table borders
For many people who are new to HTML, table <ta...
Seven ways to implement array deduplication in JS
Table of contents 1. Using Set()+Array.from() 2. ...
JS uses canvas technology to imitate echarts bar chart
Canvas is a new tag in HTML5. You can use js to o...
Analysis of the Nesting Rules of XHTML Tags
In the XHTML language, we all know that the ul ta...
Solve the problem of VScode configuration remote debugging Linux program
Let's take a look at the problem of VScode re...
SQL implementation of LeetCode (196. Delete duplicate mailboxes)
[LeetCode] 196.Delete Duplicate Emails Write a SQ...
Solution to the ineffective margin of div nested in HTML
Here's a solution to the problem where margin...
HTML Basics Must-Read - Comprehensive Understanding of CSS Style Sheets
CSS (Cascading Style Sheet) is used to beautify H...
Comparing Document Locations
<br />A great blog post by PPK two years ago...