This commit is contained in:
parent
8356259c7a
commit
66476b440c
2 changed files with 9 additions and 46 deletions
|
|
@ -7,54 +7,17 @@
|
|||
/ ╰───────────────────────────────────────────────────────╯
|
||||
/ animations - reusable css animations */
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
filter: hue-rotate(0deg) contrast(150%) saturate(150%);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: hue-rotate(360deg) contrast(150%) saturate(150%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bg-move {
|
||||
0% {
|
||||
background-position:0 0
|
||||
}
|
||||
to {
|
||||
background-position:-960px -960px
|
||||
}
|
||||
0% { background-position: 0 0; }
|
||||
to { background-position: -960px -960px; }
|
||||
}
|
||||
|
||||
@keyframes opacity-blink {
|
||||
0% { opacity: 0% }
|
||||
5% { opacity: 100% }
|
||||
45% { opacity: 100% }
|
||||
50% { opacity: 0% }
|
||||
100% { opacity: 0% }
|
||||
}
|
||||
|
||||
@keyframes opacity-blink-reverse {
|
||||
0% { opacity: 100% }
|
||||
5% { opacity: 0% }
|
||||
45% { opacity: 0% }
|
||||
50% { opacity: 100% }
|
||||
100% { opacity: 100% }
|
||||
}
|
||||
|
||||
@keyframes outline-blink {
|
||||
@keyframes outline-flash {
|
||||
0% { outline-width: 0rem; }
|
||||
50% { outline-width: .45rem; }
|
||||
100% { outline-width: 0rem; }
|
||||
to { outline-width: .5rem; outline-color: transparent; }
|
||||
}
|
||||
|
||||
@keyframes ticker {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
0% { transform: translate3d(0, 0, 0); }
|
||||
to { transform: translate3d(-100%, 0, 0); }
|
||||
}
|
||||
|
|
@ -26,14 +26,14 @@
|
|||
&::after {
|
||||
background: var(--accent);
|
||||
border-radius: 100%;
|
||||
bottom: -.2rem;
|
||||
bottom: -.25rem;
|
||||
content: "";
|
||||
height: 1rem;
|
||||
outline: .13rem solid color-mix(in srgb,var(--accent)60%,transparent);
|
||||
outline: solid var(--accent);
|
||||
position: absolute;
|
||||
right: -.3rem;
|
||||
width: 1rem;
|
||||
animation: outline-blink ease-in-out 1s infinite;
|
||||
animation: outline-flash ease-out 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue