|
131 | 131 | 70% { transform: translate(0px, 0px); } |
132 | 132 | } |
133 | 133 |
|
| 134 | +@mixin PsiStormMirror($name) { |
| 135 | + .text > .generify-container:has(+ .generify-container.generify-emote-#{$name}[data-modifiers~="mirror"]) { |
| 136 | + @content; |
| 137 | + } |
| 138 | + .text > .generify-container.generify-emote-#{$name}:not([data-modifiers~="mirror"]) + .generify-container { |
| 139 | + @content; |
| 140 | + } |
| 141 | +} |
| 142 | + |
| 143 | +@mixin PsiStorm($name) { |
| 144 | + @include PsiStormMirror($name) { |
| 145 | + margin-right: 0; |
| 146 | + margin-left: 0; |
| 147 | + animation: PsiStorm-flicker-anim 2s 3; |
| 148 | + |
| 149 | + &::after, &::before { |
| 150 | + content: ""; |
| 151 | + pointer-events: none; |
| 152 | + position: absolute; |
| 153 | + top: 50; |
| 154 | + left: 50%; |
| 155 | + margin: -20px -28px; |
| 156 | + width: 64px; |
| 157 | + height: 48px; |
| 158 | + } |
| 159 | + |
| 160 | + &::before { |
| 161 | + opacity: 0.8; |
| 162 | + mix-blend-mode: screen; |
| 163 | + background-color: #00a; |
| 164 | + mask-image: url("/assets/emotes/modifiers/psistorm-mask.png"); |
| 165 | + mask-size: 896px 48px; |
| 166 | + mask-position: 64px 0px; |
| 167 | + mask-repeat: no-repeat; |
| 168 | + animation: PsiStorm-mask-anim 2s 3; |
| 169 | + animation-timing-function: step-start; |
| 170 | + z-index: 2; |
| 171 | + } |
| 172 | + |
| 173 | + &::after { |
| 174 | + background-image: url("/assets/emotes/modifiers/psistorm.png"); |
| 175 | + background-size: 896px 48px; |
| 176 | + background-position-x: 64px; |
| 177 | + background-repeat: no-repeat; |
| 178 | + animation: PsiStorm-anim 2s 3; |
| 179 | + animation-timing-function: step-start; |
| 180 | + z-index: 3; |
| 181 | + filter: brightness(120%); |
| 182 | + } |
| 183 | + |
| 184 | + @at-root .pref-animateforever &, &:hover { |
| 185 | + animation-iteration-count: infinite; |
| 186 | + } |
| 187 | + |
| 188 | + @at-root .pref-animateforever &::before, &:hover::before { |
| 189 | + animation-iteration-count: infinite; |
| 190 | + } |
| 191 | + |
| 192 | + @at-root .pref-animateforever &::after, &:hover::after { |
| 193 | + animation-iteration-count: infinite; |
| 194 | + } |
| 195 | + } |
| 196 | +} |
| 197 | + |
| 198 | +@keyframes PsiStorm-flicker-anim { |
| 199 | + $frames: 28; |
| 200 | + @for $i from 0 to $frames { |
| 201 | + #{100 / $frames * $i * 1%} { |
| 202 | + transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100); |
| 203 | + filter: brightness(140 - random(80) * 1%); |
| 204 | + } |
| 205 | + } |
| 206 | + 100% { |
| 207 | + transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100); |
| 208 | + filter: brightness(1); |
| 209 | + } |
| 210 | +} |
| 211 | + |
| 212 | +@keyframes PsiStorm-anim { |
| 213 | + $frames: 14; |
| 214 | + $width: 896px; |
| 215 | + @for $i from 0 to $frames { |
| 216 | + #{100 / $frames * $i * 1%} { |
| 217 | + background-position-x: -$width / $frames * $i; |
| 218 | + } |
| 219 | + } |
| 220 | + 100% { |
| 221 | + background-position-x: 0px; |
| 222 | + } |
| 223 | +} |
| 224 | + |
| 225 | +@keyframes PsiStorm-mask-anim { |
| 226 | + $frames: 14; |
| 227 | + $width: 896px; |
| 228 | + @for $i from 0 to $frames { |
| 229 | + #{100 / $frames * $i * 1%} { |
| 230 | + transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px); |
| 231 | + mask-position: -$width / $frames * $i 0px; |
| 232 | + } |
| 233 | + } |
| 234 | + 100% { |
| 235 | + transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px); |
| 236 | + mask-position: 0px 0px; |
| 237 | + } |
| 238 | +} |
| 239 | + |
134 | 240 | @include PsiStorm("MAGE"); |
| 241 | +@include PsiStorm("DOIT"); |
135 | 242 |
|
136 | 243 | @include sprite-animation( |
137 | 244 | $file-name: COGGERS, |
|
0 commit comments