Electromagnetism: Difference between revisions
💔⚡️💞 |
haha funny CSS |
||
| Line 1: | Line 1: | ||
'''Electromagnetism''' is the official [[Ship of Theseus|ship-name]] for the [[Dating#Epic_Dating|toxic-yuri]] pairing between Electricity and Magnetism. Created and canonized by [[God]] shortly after the introduction of the two characters, these forces of nature are a dynamic duo, constantly showing up together yet always at odds with one another. | '''Electromagnetism''' is the official [[Ship of Theseus|ship-name]] for the [[Dating#Epic_Dating|toxic-yuri]] pairing between Electricity and Magnetism. Created and canonized by [[God]] shortly after the introduction of the two characters, these forces of nature are a dynamic duo, constantly showing up together yet always at odds with one another. | ||
{{#CSS: | |||
.hax { | |||
display: grid; | |||
grid-template-areas: "main"; | |||
} | |||
.maintext { | |||
grid-area: main; | |||
} | |||
.legrid { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
align-items: stretch; | |||
display: grid; | |||
grid-area: main; | |||
grid-template: repeat(5, 1fr) / repeat(5, 1fr); | |||
height: 100vh; | |||
justify-items: stretch; | |||
width: 100%; | |||
} | |||
.legrid .gc { | |||
width: 100%; | |||
height: 100%; | |||
z-index: 2; | |||
} | |||
.legrid .gc:nth-child(5n + 1):hover ~ .reactive { --x: 1; } | |||
.legrid .gc:nth-child(5n + 2):hover ~ .reactive { --x: 2; } | |||
.legrid .gc:nth-child(5n + 3):hover ~ .reactive { --x: 3; } | |||
.legrid .gc:nth-child(5n + 4):hover ~ .reactive { --x: 4; } | |||
.legrid .gc:nth-child(5n + 5):hover ~ .reactive { --x: 5; } | |||
.legrid .gc:nth-child(n + 0):nth-child(-n + 5):hover ~ .reactive { --y: 1; } | |||
.legrid .gc:nth-child(n + 6):nth-child(-n + 10):hover ~ .reactive { --y: 2; } | |||
.legrid .gc:nth-child(n + 11):nth-child(-n + 15):hover ~ .reactive { --y: 3; } | |||
.legrid .gc:nth-child(n + 16):nth-child(-n + 20):hover ~ .reactive { --y: 4; } | |||
.legrid .gc:nth-child(n + 21):nth-child(-n + 25):hover ~ .reactive { --y: 5; } | |||
.indicator { | |||
--xunit: 20%; | |||
--yunit: 20%; | |||
animation-iteration-count: infinite; | |||
animation-name: bounce, rotate; | |||
animation-timing-function: ease-in-out; | |||
left: calc(var(--x) * var(--xunit)); | |||
position: absolute; | |||
top: calc(var(--y) * var(--yunit)); | |||
transform-origin: 15px -8px; | |||
transition: left 1s ease-in-out, top 0.5s ease-in-out; | |||
translate: -100px 0; | |||
} | |||
.indicator.i1 { animation-delay: 0.1s; animation-duration: 0.8s; animation-direction: alternate; } | |||
.indicator.i2 { animation-delay: 0.2s; animation-duration: 0.9s; animation-direction: reverse; } | |||
.indicator.i3 { animation-delay: 0.4s; animation-duration: 1.1s; animation-direction: alternate-reverse; } | |||
.indicator.i4 { animation-delay: 0.66s; animation-duration: 1.23s; animation-direction: normal; } | |||
.indicator.i5 { animation-delay: 0.789s; animation-duration: 1.41s; animation-direction: alternate; } | |||
.indicator:after { | |||
display: inline-block; | |||
content: "😶"; | |||
font-size: 2rem; | |||
animation: rotate 1s linear infinite; | |||
transform-origin: -15px 28px; | |||
} | |||
.indicator.i1:after { font-size: 1.0rem; animation-delay: 0.1s; animation-duration: 0.8s; animation-direction: reverse; } | |||
.indicator.i2:after { font-size: 0.8rem; animation-delay: 0.2s; animation-duration: 0.9s; animation-direction: alternate; } | |||
.indicator.i3:after { font-size: 1.1rem; animation-delay: 0.4s; animation-duration: 1.1s; animation-direction: reverse; } | |||
.indicator.i4:after { font-size: 1.4rem; animation-delay: 0.66s; animation-duration: 1.23s; animation-direction: alternate-reverse; } | |||
.indicator.i5:after { font-size: 2.4rem; animation-delay: 0.789s; animation-duration: 1.41s; animation-direction: normal; } | |||
@keyframes rotate { 0% { rotate: 0deg; } 100% { rotate: 360deg; } } | |||
@keyframes bounce { 0% { translate: 0, 0; } 50% { translate: 0, -20px; } 100% { translate: 0, 0; } } | |||
}} | |||
<div class="hax"> | |||
<div class="legrid"> | |||
<div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> | |||
<div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> | |||
<div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> | |||
<div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> | |||
<div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> <div class="gc"></div> | |||
<div class="indicator i1 reactive"></div> | |||
<div class="indicator i2 reactive"></div> | |||
<div class="indicator i3 reactive"></div> | |||
<div class="indicator i4 reactive"></div> | |||
<div class="indicator i5 reactive"></div> | |||
</div> | |||
<div class="maintext reactive"> | |||
</div> | |||
</div> | |||
{{Stub}} | {{Stub}} | ||