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

⋆˚ଳ‧₊ᱸ⚓𝑃𝐄𝐙𝐶𝐀𝑂᮫🦈ᱸ₊⊹｡˚⭒	1781825310 Usingg Report Comment
Mrt(;´Д⊂)	1780170713 usinggg :D Report Comment
cal	1780041195 uusing Report Comment
mattjvs.mp3	1775804467 using! Report Comment
𝓷𝓎𝒶𝓴𝓸𝒐 / 笑	1774468895 Using! Report Comment
Blu3b33ry_l3m0n	1774324569 Using! Report Comment
Doublebight	1773268150 usingggg <33333 Report Comment
Hanna	1772622513 Usinggg Report Comment
guizoka	1772507519 usingg Report Comment
Sun of Silvanus	1771791382 using!! <3 Report Comment
Oli	1769555466 using!! :) Report Comment
BoyWithWings ᯓ★	1769157305 using!! ^^ Report 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	1763691051 using tyy Report Comment
L0NELY4L1FE</3	1761482673 using Report Comment