学习抖音： @渡一前端教科频道
利用 filter 的属性实现交融效果
变成 
让后利用这个效果实现一个功能
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 400px;
background: red;
}
.bubbles {
width: 100%;
height: 40px;
background-color: red;
filter: url(#blob);
}
.bubble {
position: absolute;
border-radius: 50%;
--x: 200px;
--s: 50px;
--d: 2s;
width: var(--s);
height: var(--s);
left: var(--x);
top: 30px;
background-color: red;
animation: bubbling var(--d) ease-in forwards;
}
@keyframes bubbling {
75% {
transform: scale(1);
}
to {
transform: scale(0);
top: -200px;
}
}
.content {
display: flex;
filter: url(#blob);
}
.box {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
.box1 {
position: absolute;
top: 80px;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
<div class="box box1"></div>
</div>
<div class="footer">
<div id="bubbles" class="bubbles">
<div class="bubble"></div>
</div>
</div>
<svg style="display: none;">
<defs>
<filter id="blob">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="10"
result="blur"></feGaussianBlur>
<feColorMatrix
in="blur"
mode="matrix"
values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 20 -10"></feColorMatrix>
</filter>
</defs>
</svg>
</body>
<script>
const n = 7;
const bubbles = document.getElementById("bubbles")
// 动画结束删除小时的元素
bubbles.addEventListener("animationend", (e) => {
console.log(e.target)
e.target.remove()
})
function createBubble() {
const vw = document.documentElement.clientWidth;
for (let i = 0; i < n; i++) {
// 创建泡泡
const bubble = document.createElement("div")
bubble.className = "bubble";
let s = Math.random() * 100 + 50;
let x = Math.random() * (vw - s);
let d = Math.random() * 2 + 1;
bubble.style.setProperty("--x", x + "px")
bubble.style.setProperty("--s", s + "px")
bubble.style.setProperty("--d", d + "s")
bubbles.appendChild(bubble)
}
}
setInterval(createBubble, 1000)
/**
* <filter id="blob">
<feGaussianBlur // 可以理解成一个函数 func1
in="SourceGraphic" // 返回原本颜色
stdDeviation="10" // 模糊程度 10
result="blur"> // 返回这个值 blur 相当于函数的ruturn
</feGaussianBlur>
<feColorMatrix // 可以理解成一个函数 func2
in="blur" // 接受 blur
mode="matrix" // 模式 是矩阵
values="
1 0 0 0 0 R
0 1 0 0 0 G
0 0 1 0 0 B
0 0 0 20 -10" A // 在原来模糊的情况下 把那些模糊的点变成实体， 让边缘透明度变成20倍颜色 -10是让透明的颜色去除
></feColorMatrix>
</filter>
*/
</script>
</html>
