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

lin <33	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
mika>3	1741532454 using Report Comment
NorNor	1740333844 Using!<3 Report Comment
R0S3~!!	1739868675 Using!! Report Comment
Encyclopedia Blue 𓂀	1739415017 Using! Report Comment
zEKE	1738382909 usinggg:3 Report Comment
Technotism	1738379597 using :3 Report Comment
IMCOOLERCUZIMBLUE	1737267126 using Report Comment
layla	1736593737 using!! Report Comment
Tav🩵🫧	1736361836 using ;3 Report Comment
3xst.flac Ç♱	1735969569 using Report Comment
xXLylaloopsy_Xx	1734881968 Using!! Ty!! Report Comment
emowo	1734831088 i modified the theme to use ITG arrows :3 thanks! Report Comment
SHORESY	1734162967 using Report Comment