Example code for implementing the wavy water ball effect using CSS

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

insert image description here

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

Best Practices Guide for MySQL Partitioned Tables

Preface: Partitioning is a table design pattern. ...

Detailed explanation of NodeJS modularity

Table of contents 1. Introduction 2. Main text 2....

Linux CentOS 6.5 Uninstall, tar and install MySQL tutorial

Uninstall the system-provided MySQL 1. Check whet...

How to clear the validation prompt in element form validation

Table of contents Problem scenario: Solution: 1. ...

Mini Program to Implement Slider Effect

This article example shares the specific code for...

Solution to ElementUI's this.$notify.close() call not working

Table of contents Requirement Description Problem...

Statement to determine browser version and compatible with multiple browsers

<!--[if lte IE 6]> <![endif]--> Visibl...

How to solve the problem of clicking tomcat9.exe crashing

A reader contacted me and asked why there were pr...

Detailed explanation of MySQL 5.7.9 shutdown syntax example

mysql-5.7.9 finally provides shutdown syntax: Pre...

How to write a Node.JS version of a game

Table of contents Overview Build Process Related ...

Ubuntu 16.04 image complete installation tutorial under VMware

This article shares with you the installation tut...

Getting the creation time of a file under Linux and a practical tutorial

background Sometimes we need to get the creation ...

Implementation of code optimization for Vue2.x project performance optimization

Table of contents 1 Use of v-if and v-show 2. Dif...

The marquee element implements effects such as scrolling fonts and pictures

The marquee element can achieve simple font (image...

Detailed process of NTP server configuration under Linux

Table of contents 1. Environment Configuration 1....