DanceDanceRevolution!!! (animated layout)

Tags: dancedancerevolution, animation, layout, loop, 2000s, tweak, ddr

Description:

Just an animation of a falling arrow from ddr. Shows on the left side of the page (LAGS SO MUCH - animated) changing colours and ect. (You can see it on my page)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by wareti (https://layouts.spacehey.com/layout?id=89712) -->

<style>

    .game-area {
      position: absolute;
      right: 0;
      top: 0;
      width: 256px;
      height: 500px;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
    }

    .arrow {
      position: absolute;
      width: 50px;
      height: 50px;
      background-image: url('https://image.spreadshirtmedia.com/image-server/v1/designs/2481931,width=178,height=178,colors%5B0%5D=9DC8D9,colors%5B1%5D=000000.png');
      background-size: contain;
      animation: fallAnimation 2s linear infinite;
    }

    .arrow-up {
      transform: rotate(0deg);
      animation-delay: 1.25s;
      right: 0;
    }

    .arrow-down {
      transform: rotate(180deg);
      animation-delay: 0.5s;
      right: 50px;
    }

    .arrow-left {
      transform: rotate(-90deg);
      animation-delay: 1.5s;
      right: 100px;
    }

    .arrow-right {
      transform: rotate(90deg);
      animation-delay: 1s;
      right: 150px;
    }

    @keyframes fallAnimation {
      0% {
        top: -50px;
        opacity: 0.8;
        filter: hue-rotate(0deg);
        right: calc(10% * (1 + random()));
      }
      100% {
        top: calc(100% + 50px);
        opacity: 0.1;
        filter: hue-rotate(360deg);
        right: calc(10% * (1 + random()));
      }
    }
  </style>
  <div class="game-area">
    <div class="arrow arrow-up"></div>
    <div class="arrow arrow-down"></div>
    <div class="arrow arrow-left"></div>
    <div class="arrow arrow-right"></div>
  </div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 46 comments ( View all | Add Comment )

2005	1715183803 using!! Report Comment
Женя Эшкериец	1715067724 Using:D Report Comment
april⋆.ೃ࿔	1713689540 usingg!!! Report Comment
setowo	1713655009 Using!!! Report Comment
turnip! 🍌	1712386661 using! Report Comment
saasageyo	1712064228 usando! Report Comment
𓍢ִ໋🌷͙֒melody ໒꒰ྀིᵔ ᵕ ᵔ ꒱ྀི১	1710773435 using it !!! adjusted to fall above my pinkie pie on the left x3 Report Comment
doomkerr	1710297479 Using Report Comment
Kayden	1709491116 Using, ty! Report Comment
K A Y N / I V A N	1708932463 using Report Comment
⋆ ˚｡⋆୨ ʚAlexisɞ ୧⋆ ˚｡⋆	1708311618 USING AHH !!! Report Comment
Gezora	1708152243 OMGG USING Report Comment
Cat Nuke	1708026269 using Report Comment
edhoe;]	1707191539 using Report Comment
Solei	1707102737 using Report Comment
spacebf	1706910950 using Report Comment
liquid kote	1706261126 using Report Comment
just XD now!!	1706195572 using Report Comment
𝙲𝚞𝚢𝙳𝚓⁶⁹	1706129138 usando Report Comment
Ro'splace	1705897876 usando :) Report Comment