SVG扩散特效

<template>
    <div class="title">扩散特效</div>
    <!-- 可以通过讲宽高设置为0，实现应用滤镜效果，但不隐藏SVG元素 -->
    <svg class="hideSVG">
        <defs>
            <!-- 这是一个 SVG 内发光效果示例(内发光可以设置颜色，内阴影一般只有黑色) -->
            <!-- SVG 的内阴影滤镜与 box-shadow 不同点 -->
            <!-- box-shadow 以CSS 盒子模型为标准，所以所有的发光、阴影效果都是方形的（圆角贴合除外） -->
            <!-- SVG 的滤镜是以 SVG 几何元素为边界进行的，所以形状是不固定的 -->
            <filter id="innershadow" x0="-50%" y0="-50%" width="200%" height="200%">
                <feComponentTransfer in=SourceAlpha>
                    <feFuncA type="table" tableValues="1 0" />
                </feComponentTransfer>
                <feGaussianBlur stdDeviation="3" />
                <feOffset dx="0" dy="0" result="offsetblur" />
                <feFlood flood-color="#0d619d" result="color" />
                <feComposite in2="offsetblur" operator="in" />
                <feComposite in2="SourceAlpha" operator="in" />
                <feMerge>
                    <feMergeNode in="SourceGraphic" />
                    <feMergeNode />
                </feMerge>
            </filter>
        </defs>
    </svg>
    <!-- 有了 filter，在项目的任意一个地方都可以使用 -->
    <!-- 因为 SVG 的作用于 属于 DOM 层，不在 js 的文件作用于中，所以 SVG 的元素属性是全局的 -->
    <!-- 注意在创建滤镜的时候不要重名 -->
    <svg viewBox="0 0 100 100" class="SVG">
        <!-- 滤镜效果可以写在其他位置，但是所在SVG元素不能隐藏 -->
        <!-- 可以通过给 SVG 几何元素设置样式来编写 keyframes 动画 -->
        <!-- 但由于 SVG 几何元素 的中心点位置并不是元素中心，所以动画需要手动设置位置 -->
        <polygon class="item" filter="url(#innershadow)" points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25 " />
        <polygon class="item delay-1s" filter="url(#innershadow)" points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25 " />
        <polygon class="item delay-2s" filter="url(#innershadow)" points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25 " />
    </svg>
    <br><br>
</template>
<script setup>

</script>
<style lang="less" scoped>
.title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #999;
}

.hideSVG {
    width: 0;
    height: 0;
}

.SVG {
    height: 100px;
}

.item {
    animation: diffusion linear infinite 3s;
    /* 设置元素缩放的中心点 */
    transform-origin: 50% 50% 0;
    /* 因为内阴影是滤镜实现的，所以背景色不能为透明（背景有颜色才能基于背景实现滤镜，没有颜色则应用不了滤镜） */
    fill: #000;
    fill-opacity: 0.4;
    transform: scale(0);

    &.delay-1s {
        animation-delay: 1s;
    }

    &.delay-2s {
        animation-delay: 2s;
    }
}

@keyframes diffusion {

    /* 扩散其实就是从透明，中心点缩放为0，到不透明，缩放为100% 的过程 */
    0% {
        opacity: 0;
        transform: scale(0);
    }

    /* 
    // 中间插入两个关键帧，用于更改动画的视觉效果，
    // 原理跟动画曲线类似，但是由于关键帧可以单独控制每个属性的过程，
    // 相对比较简单一些。
    */
    30% {
        opacity: 1;
        transform: scale(0.3);
    }

    90% {
        opacity: 1;
        transform: scale(0.9);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}
</style>