HTML+CSS to achieve charging water drop fusion special effects code
|
First look at the effect:
Preface:I came up with this idea after seeing the up-loader Steven on Bilibili. I thought it was great, so I made one myself. (pure CSS) accomplish:Define a label with three water drop boxes, a circle box to display numbers, and a bottom box:
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
99%
</div>Give the bottom-most box basic styling. Flex layout, so that the three water drops will be temporarily arranged vertically in the center.
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter:contrast(30);
}filter: contrast(30);Adjusts the contrast of the image. A value of 0% will make the image completely black. At a value of 100%, the image remains unchanged. Values can exceed 100%, meaning a lower contrast will be used. If no value is set, the default is 1. The basic style of the water drop. Absolute positioning, so that the three boxes will overlap.
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}filter: blur(20px); sets blur to the image. Key point: We give the water drop box blur, so the three water drop boxes will appear blurred. Next, we set the image contrast for the underlying box so that the blurred image will redraw the outline and get the following effect:
Give the circle that will display the number a basic style. Remember to set the blur as well. In this way, the image contrast will be integrated with the falling water drops.
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}Set animations for the water drops, so that they fall from top to bottom and change in size. You can adjust these by yourself and set them to the effect you think is best.
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%);
}
100%{
transform: scale(0.3) translateY(0px);
}
}Play the animation after a delay for the second and third water drops, so that the three water drops will fall separately. As for the number of seconds, you can adjust it slowly and set it to what you think is the best effect.
.kuang div:nth-of-type(2){
animation-delay: 1.5s;
}
.kuang div:nth-of-type(3){
animation-delay: 2s;
}Animate the circle showing the number so it spins. During this period, you can make its size or angle undergo or other changes. You can slowly adjust the specific values yourself and set them to what you think is the best effect.
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1)rotate(360deg);
}
}Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Northern Lights Night. </title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kuang{
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(5,5,5);
filter:contrast(30);
}
.droplet{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: fall 3s linear infinite;
opacity: 0;
}
.kuang div:nth-of-type(2){
animation-delay: 1.5s;
}
.kuang div:nth-of-type(3){
animation-delay: 2s;
}
@keyframes fall{
0%{
opacity: 0;
transform: scale(0.8) translateY(-500%);
}
50%{
opacity: 1;
transform: scale(0.5) translateY(-100%);
}
100%{
transform: scale(0.3) translateY(0px);
}
}
.quan{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(61, 233, 99);
filter: blur(20px);
animation: zhuan 3s infinite;
}
@keyframes zhuan{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.1) rotate(180deg);
height: 90px;
border-top-left-radius: 45%;
border-bottom-left-radius: 48%;
}
100%{
transform:scale(1)rotate(360deg);
}
}
span{
position: absolute;
color: rgb(184, 182, 182);
font-size: 26px;
font-family: 'fangsong';
font-weight: bold;
}
</style>
</head>
<body>
<div class="kuang">
<div class="droplet"></div>
<div class="droplet"></div>
<div class="droplet"></div>
<div class="quan"></div>
99%
</div>
</body>
</html>Summarize:This is the end of this article about the HTML+CSS code for implementing charging water drop fusion special effects. For more related HTML water drop fusion content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: An example of implementing a simple finger click animation with CSS3 Animation
>>: Pure CSS3 realizes the effect of div entering and exiting in order
Recommend
Summary of the pitfalls you may not have encountered in WeChat applet development
Table of contents getApp() Define variables at th...
CentOS7 64-bit installation mysql graphic tutorial
Prerequisites for installing MySQL: Install CentO...
A detailed introduction to Linux file permissions
The excellence of Linux lies in its multi-user, m...
mysql: [ERROR] unknown option '--skip-grant-tables'
MySQL database reports ERROR 1045 (28000): Access...
Summary of four situations of joint query between two tables in Mysql
Generally speaking, in order to get more complete...
Use of VNode in Vue.js
What is VNode There is a VNode class in vue.js, w...
Detailed graphic instructions for downloading and installing the unzipped version of MySQL 5.7.18 and starting the MySQL service
Because the distribution package of MySQL Communi...
Summary of the operation records of changing MyISAM storage engine to Innodb in MySQL
In general, MySQL provides a variety of storage e...
Detailed explanation of mixed inheritance in Vue
Table of contents The effect of mixed inheritance...
Use of Linux watch command
1. Command Introduction The watch command execute...
How to export mysql table structure to excel
The requirements are as follows Export the table ...
Detailed introduction to MySQL database index
Table of contents Mind Map Simple understanding E...
What the website needs most is to improve the experience of the target user group
"The great river flows eastward, the waves w...
Detailed explanation of JSON.parse and JSON.stringify usage
Table of contents JSON.parse JSON.parse Syntax re...
MySQL 5.7.18 installation tutorial under Windows
This article explains how to install MySQL from a...