用transform跟filter模糊成倒像，水滴上能放字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
.bg {
position: fixed;
width: 100%;
height: 100%;
z-index: -2147483648;
}
.bg-img {
background: url(https://img-blog.csdnimg.cn/20201218185643947.gif) no-repeat fixed;
background-size: cover;
}
.box {
margin: 25vmin;
display: inline-block;
position: relative;
width: 50vmin;
height: 50vmin;
border-radius: 50vmin;
overflow: hidden;
box-shadow: -3vmin 3vmin 3vmin 3vmin #0008;
}
.blur-bg {
width: 80%;
height: 80%;
right: 0;
top: 0;
border-radius: 50% 0 50% 50%;
display: inline-block;
position: absolute;
filter: blur(20px) brightness(105%);
transform: scale(1.25);
}
.blur-shandow {
width: 100%;
height: 100%;
display: inline-block;
border-radius: 0 0 0 100%;
position: absolute;
filter: brightness(90%) blur(5px);
transform: rotate(180deg);
}
.no-blur {
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
filter: brightness(80%);
transform: scale(1.5);
}
.light {
width: 40%;
height: 40%;
right: 8%;
top: 8%;
border-radius: 100%;
display: inline-block;
position: absolute;
background-color: #fff4;
transform: skew(10deg, 10deg);
}
.text {
display: table-cell;
vertical-align: middle;
font-size: 5em;
color: #fff
}
.inner {
display: table;
position: absolute;
text-align: center;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="bg bg-img" object-fit='cover'>
<div class="box">
<div class="no-blur bg-img"></div>
<div class="blur-shandow bg-img"></div>
<div class="blur-bg bg-img"></div>
<div class="light"></div>
<div class="inner">
<div class="text">
滴
</div>
</div>
</div>
</div>
</body>
</html>
