AverageMarcus/blog
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Lessen glitch effect

Browse Source 
Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
This commit is contained in:
Marcus Noble 2022-05-03 06:36:44 +01:00
parent 0aaf47909f
commit 1a4c18cce0
Signed by: AverageMarcus
GPG Key ID: B8F2DB8A7AEBAF78
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/css/_glitch.scss
View File

@ -1,12 +1,15 @@
.glitch-image:hover, .glitch:hover, a:hover {
animation-iteration-count: infinite
}
.glitch-image { .glitch-image {
animation: shift 3s ease-in-out infinite alternate; animation: shift 3s ease-in-out .2s alternate;
} }
.glitch, a:hover { .glitch, a:hover {
position: relative; position: relative;
text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary), 0.025em 0.04em 0 var(--primary-inverse); text-shadow: 0.05em 0 0 var(--primary-hover), -0.03em -0.04em 0 var(--primary), 0.025em 0.04em 0 var(--primary-inverse);
animation: glitch 2s ease alternate infinite, shift 2s ease alternate infinite; animation: glitch 2s ease alternate, shift 2s ease alternate;
&::before, &::after { &::before, &::after {
position: absolute; position: absolute;