<template>
<div class="title">扩散特效</div>
<svg class="hideSVG">
<defs>
<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>
<svg viewBox="0 0 100 100" class="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% {
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>