交融动画学习

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

利用 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>
相关推荐
2303_Alpha3 天前
SpringBoot
笔记·学习
萘柰奈3 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽3 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫3 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie3 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿3 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng3 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa