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

bobettemopette	1737267126 using Report Comment
polygon	1736593737 using!! Report Comment
Yakzz.🦇	1736361836 using ;3 Report Comment
3x3stphvs	1735969569 using Report Comment
Sk8ergrlLyla117	1734881968 Using!! Ty!! Report Comment
emowo	1734831088 i modified the theme to use ITG arrows :3 thanks! Report Comment
MG ULTRA	1734162967 using Report Comment
llilyXP	1733498676 using Report Comment
ay3sha	1733337558 using Report Comment
Abbie	1732822121 using Report Comment
Fatima	1732149099 using Report Comment
BraınlessBımbo	1731602457 using xo Report Comment
ciara1114	1730605455 usingg Report Comment
GabriELLIe	1730124074 usiiingngn Report Comment
cas (,,>﹏<,,)	1730073520 using !!! Report Comment
fartlord69	1726931600 using^^ Report Comment thx fartlord3000 <3 by wareti; 1727145224; Report
beavis	1726627467 usingg Report Comment
Nani!! <3	1724583569 using!! (≧∇≦)/ Report Comment
noel	1724223393 uusing :3 Report Comment