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
Example of Vue transition to achieve like animation effect
Table of contents Results at a Glance Heart Effec...
How to turn off eslint detection in vue (multiple methods)
Table of contents 1. Problem Description 2. Probl...
MySQL 5.7.13 winx64 installation and configuration method graphic tutorial (win10)
This article shares with you the graphic tutorial...
How to design a responsive web? Advantages and disadvantages of responsive web design
I have been learning about responsive design rece...
Summary of xhtml block level tags
* address - address * blockquote - block quote * c...
Vue + OpenLayers Quick Start Tutorial
Openlayers is a modular, high-performance and fea...
HTML form tag usage learning tutorial
Forms in HTML can be used to collect various type...
Summary of common tool examples in MySQL (recommended)
Preface This article mainly introduces the releva...
Example of how to achieve ceiling effect using WeChat applet
Table of contents 1. Implementation 2. Problems 3...
MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID
mysql id starts from 1 and increases automaticall...
Several solutions for CSS record text icon alignment
It is very common to see images and text displaye...
Detailed explanation of javascript knowledge points
Table of contents 1. Basic Introduction to JavaSc...
Full analysis of web page elements
Relative Length Units em Description: Relative len...
Detailed tutorial on using VMware WorkStation with Docker for Windows
Table of contents 1. Introduction 2. Install Dock...
Analysis and solution of data loss during Vue component value transfer
Preface In the previous article Two data types in...