<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>
SVG扩散特效
最新推荐文章于 2024-03-26 11:48:38 发布