Переглянути джерело

Properly fix the marching ants

vintage
Fen Dweller 5 роки тому
джерело
коміт
0a9bca9ae8
1 змінених файлів з 7 додано та 3 видалено
  1. +7
    -3
      src/components/Statblock.vue

+ 7
- 3
src/components/Statblock.vue Переглянути файл

@@ -299,10 +299,11 @@ a {
/* yoinked from https://codepen.io/danichk/pen/PPRxrR?editors=0110 */

.marching-ants {
background: linear-gradient(#111, #111) padding-box, repeating-linear-gradient(-45deg, var(--ants-color) 0, var(--ants-color) 25%, transparent 0, transparent 50%) 0 / 3em 3em;
animation: marching-ants 4s infinite linear;
background: linear-gradient(#111, #111) padding-box, repeating-linear-gradient(-45deg, var(--ants-color) 0, var(--ants-color) 25%, transparent 0, transparent 50%) 0 / 20px 20px;
animation: marching-ants 1s infinite linear;
border: 4px solid transparent;
}

.statblock[data-active] .statblock-shader-selected {
--ants-color: #f88;
border-radius: 8px;
@@ -328,8 +329,11 @@ a {
}

@keyframes marching-ants {
from {
background-position: 0px 0px;
}
to {
background-position: 100% 100%;
background-position: 20px 20px;
}
}



Завантаження…
Відмінити
Зберегти