交融动画学习

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

利用 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 小时前
C++初阶学习第十弹——深入讲解vector的迭代器失效
数据结构·c++·学习
南宫生3 小时前
贪心算法习题其四【力扣】【算法学习day.21】
学习·算法·leetcode·链表·贪心算法
懒惰才能让科技进步4 小时前
从零学习大模型(十二)-----基于梯度的重要性剪枝(Gradient-based Pruning)
人工智能·深度学习·学习·算法·chatgpt·transformer·剪枝
love_and_hope4 小时前
Pytorch学习--神经网络--搭建小实战(手撕CIFAR 10 model structure)和 Sequential 的使用
人工智能·pytorch·python·深度学习·学习
Chef_Chen4 小时前
从0开始学习机器学习--Day14--如何优化神经网络的代价函数
神经网络·学习·机器学习
芊寻(嵌入式)4 小时前
C转C++学习笔记--基础知识摘录总结
开发语言·c++·笔记·学习
hong1616885 小时前
跨模态对齐与跨领域学习
学习
阿伟来咯~5 小时前
记录学习react的一些内容
javascript·学习·react.js
Suckerbin6 小时前
Hms?: 1渗透测试
学习·安全·网络安全
水豚AI课代表6 小时前
分析报告、调研报告、工作方案等的提示词
大数据·人工智能·学习·chatgpt·aigc