xmengnet/yacd
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Add scale effect in zap icon pulse animation

Browse source
This commit is contained in:
Haishan 2022-06-12 18:43:01 +08:00
parent 38571da24a
commit d10d30baa3
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/shared/ZapAnimated.module.scss
View file

@ -1,12 +1,13 @@
.animate { .animate {
--saturation: 70%; --saturation: 70%;
stroke: hsl(46deg var(--saturation) 45%); stroke: hsl(46deg var(--saturation) 45%);
transform: scale(1);
animation: zap-pulse 0.7s 0s ease-in-out none normal infinite; animation: zap-pulse 0.7s 0s ease-in-out none normal infinite;
} }
// prettier-ignore // prettier-ignore
@keyframes zap-pulse { @keyframes zap-pulse {
0% { stroke: hsl(46deg var(--saturation) 45%); } 0% { stroke: hsl(46deg var(--saturation) 45%); transform: scale(1); }
50% { stroke: hsl(46deg var(--saturation) 95%); } 50% { stroke: hsl(46deg var(--saturation) 95%); transform: scale(1.1); }
100% { stroke: hsl(46deg var(--saturation) 45%); } 100% { stroke: hsl(46deg var(--saturation) 45%); transform: scale(1); }
} }