css special effects water drop effect
Want to see the effect:
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<div class="container">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="collection"></div>
<span>80%</span>
</div>
</body>
</html>
css code:
body{
margin: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000000;
flex-direction: column;
filter:contrast(30)
/* filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
滤镜通常用于调整图像，背景和边框的渲染 */
}
.drop{
position: absolute;
width: 100px;
height: 100px;
background: #FFFFFF;
border-radius: 50%;
filter: blur(20px);
opacity: 0;
animation: 3s drop linear infinite;
}
.drop:nth-child(2){
animation-delay: .5s;
}
.drop:nth-child(3){
animation-delay: .7s;
}
.collection{
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 50%;
filter: blur(20px);
animation: 3s collection linear infinite;
animation-delay: 2s;
}
span{
position: absolute;
font-family: helvetica;
font-size: 30px;
}
@keyframes collection{
0%{
transform: scale(1) rotate(0deg);
}50%{
transform: scale(1.3) rotate(180deg);
width: 90px;
border-top-left-radius: 40%;
border-bottom-left-radius: 45%;
}100%{
transform: scale(1) rotate(360deg);
}
}
@keyframes drop{
0%{
transform: scale(.7) translateY(-600%);
opacity: 0;
}
50%{
transform: scale(.4) translateY(-80%);
opacity: 1;
}
100%{
transform: scale(.3) translateY(0px);
}
}
Summarize:
The modified code mainly uses the filter filter in css3filter - CSS (Cascading Style Sheet) filter CSS properties will be blurred or color biased Graphic effects such as shift are applied to elements. Filters are commonly used to adjust the rendering of images, backgrounds and borders.
blur():
blur()The function applies Gaussian blur to the input image. radius defines the standard deviation value of the Gaussian function, or how many pixels on the screen blend into each other, so larger values will produce more blur. If no value is set, the default is 0. This parameter can be specified as a CSS length, but does not accept a percentage value. Example: filter: blur(5px)
contrast()
contrast()The function adjusts the contrast of the input image. If the value is 0%, the image will be completely black. The value is 100% and the image is unchanged. Values can exceed 100%, meaning lower contrast will be used. If no value is set, the default is 1. Example: filter: contrast(200%)
Using these two functions makes the display edge of the entire large div have a more fluid effect. Through the dynamic effect of animation, the dynamic effect is achieved by gradually enlarging, showing and hiding, rotating, and delaying animation.