效果视频展示:
(html + css)水滴效果
全部代码(放心粘贴):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阡小年</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
:root{
--background-color:rgb(39, 40, 43);
}
*{
margin: 0;
padding: 0;
}
html{
font-size:14px;
}
body{
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
}
.container{
position: relative;
width: 400px;
height: 400px;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
filter: contrast(30);
z-index: 10;
overflow: hidden;
}
.drop{
position: absolute;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 100%;
filter: blur(20px);
animation: drop 5s linear infinite;
z-index: 2;
}
.drop:nth-child(2){
animation-delay: 6s;
}
.drop:nth-child(3){
animation-delay: 6s;
}
.collection{
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 100%;
filter: blur(20px);
animation: collection 3s linear infinite;
}
@keyframes drop{
0%{
transform: scale(0.8) translateY(-150px);
}
50%{
transform: scale(0.7) translateY(-50px);
}
100%{
transform: scale(0.6) translateY(0px);
}
}
@keyframes collection{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.3) rotate(180deg);
height: 10px;
}
100%{
transform: scale(1.5) rotate(360deg);
}
}
</style>
<body>
<div class="container">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="collection"></div>
</div>
</body>
</html>