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 97 comments ( View all | Add Comment )

✮✦༻𝓿𝓲𝓸𝓵𝓮𝓽༺✦✮	1767764137 using Report Comment
dvmblor	1767538713 usingg <3 Report Comment
Lili 𐔌՞. .՞𐦯	1767375978 Using!! :D Report Comment
[AAR0N⌖]	1766713877 Using !! ^_^ Report Comment
Jazzy	1766201563 Using!! <3 tysm!! Report Comment
Epsilon404	1764355236 Using! Report Comment
oXPrincessGooseyXo (18+ ONLY PLZ)	1763691051 using tyy Report Comment
L0NELY4L1FE</3	1761482673 using Report Comment
blueb3rry<3	1761023251 using <3 Report Comment
xXLylaloopsy_Xx	1759892195 Using!!! Report Comment
★Kaos !!★	1758588846 usinggg Report Comment
lov3lybaby	1755608888 using!!!! Report Comment
Cibo	1755456894 Usinggg! Report Comment
Cibo	1755456894 Usinggg! Report Comment
lin	1753484040 using!! <33 Report Comment
Ivy	1753138410 using!! Report Comment
niko ٩(ˊᗜˋ )و	1748747401 using! :D Report Comment
melon ❀༉‧₊˚	1748113312 Using! Report Comment
Akai Hikari	1744438209 Using :3 Report Comment
G3T0FFTH3STAGE!!	1744069725 using Report Comment