crtjs/css/style.css
2021-01-23 19:06:18 +01:00

43 lines
No EOL
820 B
CSS

html,
body {
--size: 50px;
margin: 0;
overflow: hidden;
background: gray;
}
html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
--resolution: 200px;
width: calc(var(--size) * 4);
height: calc(var(--size) * 5);
background: black;
}
#electron {
position: absolute;
width: var(--size);
height: var(--size);
background: red;
/*animation: interpolate 1ms linear infinite;*/
}
@keyframes interpolate {
to {
box-shadow:
0 -20px 0 red, 0 20px 0 red, /* y 1 */
0 -40px 0 red, 0 40px 0 red, /* y 2 */
0 -80px 0 red, 0 80px 0 red, /* y 3 */
0 -100px 0 red, 0 100px 0 red, /* y 4 */
-20px 0 0 red, 20px 0 0 red, /* x 1 */
-40px 0 0 red, 40px 0 0 red, /* x 2 */
-80px 0 0 red, 80px 0 0 red, /* x 3*/
-100px 0 0 red, 100px 0 0 red; /* x 4 */
}
}