交融动画学习

学习抖音: @渡一前端教科频道

利用 filter 的属性实现交融效果

变成

让后利用这个效果实现一个功能

实现代码:

html 复制代码
<!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>
相关推荐
-一杯为品-2 分钟前
【51单片机】程序实验5&6.独立按键-矩阵按键
c语言·笔记·学习·51单片机·硬件工程
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
EterNity_TiMe_2 小时前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__2 小时前
java学习-集合
学习
lxlyhwl2 小时前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot2 小时前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
CV学术叫叫兽3 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年3 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
一棵开花的树,枝芽无限靠近你4 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
VertexGeek4 小时前
Rust学习(八):异常处理和宏编程:
学习·算法·rust