Bouncing Tails DVD overlay

Tags: sonic, tails, dvd, gif, animation, overlay, pixel, retro, gaming

Description:

Bouncing DVD logo. You can replace the Tails gif with any other image.

Preview:

click on the image for a larger preview

Code:

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

<div class="box"><b>

<style>

.box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none; 
}

.box b {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("https://media.tenor.com/s3LHTiBAoagAAAAi/sonic-mania-tails-the-fox.gif");
  background-size: cover;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
  -moz-animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
  -o-animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
  animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
}

-webkit-keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); } /* Adjust the 'to' value to make the element move horizontally */
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); }
}
@keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); }
}

@-webkit-keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); } /* Adjust the 'to' value to make the element move vertically */
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); }
}
@keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); }
}

</style></b></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 74 comments ( View all | Add Comment )

ℒ.𝒩	1755959509 using! but does anyone know how to remove the blur border line? Report Comment
VHS Wiz ｡𖦹	1754179624 Using!! Report Comment
ִ ࣪⋆𖤐 sol	1751776531 using!! Report Comment
Maxwell Manic Addict	1747794906 Using! :] Report Comment hey where did you paste it so it bounces across the whole page? not just the about me etc part by ℒ.𝒩; 1755959975; Report
Slenderman	1745970643 USING!!! Report Comment
excrucible	1745082825 thank you!!! Report Comment
chiggaland	1744585522 using ! Report Comment
Jazmine !	1743117588 USINGG Report Comment
Mari	1742523375 Using!! Report Comment
Hammy_love3	1741550111 USING!! Report Comment
Masonzzz	1740913656 Using!!! Report Comment
yreva	1739056036 Using!!!11 Report Comment
★ 𝒯𝘩𝘶𝘳𝘴𝘥𝘦𝘺𝘤𝘩𝘪𝘭𝘥 ★	1739009363 THANK YOU Report Comment
fornicator	1738276836 using! Report Comment
KoolioKota	1737707925 Using! Report Comment
Kursephone	1737429486 Using ^^ Report Comment
lucky ⌯>ᴗ<⌯ ಣ	1737354892 USINGGG!1!! Report Comment
sillyethan	1736940836 using but changing image Report Comment
ash!!!	1736805999 usingg Report Comment
🦷 M07HM4N 💉	1733463098 Using!! Report Comment