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

Alrite	1715801460 usiiiing :3 Report Comment
𝕯𝖆𝖒𝖎𝖎!°˖✧	1714101110 Using ;P Report Comment
vinny	1714068192 USING!!!! Report Comment
Kore Jewels	1713463387 Using! Report Comment
♡Neva♡	1712163059 using:3 Report Comment
⭐🌸A nerdy artist ( peridot 5xg)🌸⭐🍉 inactive	1709860765 might use Report Comment
Y͜͡i͜͡p͜͡p͜͡e͜͡e͜͡	1709852013 Using! Report Comment where did u get the image u used for it? by ⭐🌸A nerdy artist ( peridot 5xg)🌸⭐🍉 inactive; 1709860756; Report Here's the link to where I got it https://media4.giphy.com/media/GGE9CDsizAqu4/giphy.gif?cid=6c09b952y0ybfebc6p4bodgkxpi6amsjpg6lpsteeb1948vo&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=s by Y͜͡i͜͡p͜͡p͜͡e͜͡e͜͡; 1709875890; Report
Robyn :3	1709264675 using :3 Report Comment
BIVE	1707232073 usingg Report Comment
Matt	1707212930 really appreciated man, using Report Comment
maialinda	1705959520 usandop Report Comment
maialinda	1705959502 usandop Report Comment
CHESSBURGER O_o [AUTOPLAY]	1702140332 USING! Report Comment
Zaki~♡	1701830780 using Report Comment
Lyn >_<	1701064656 usin Report Comment
PIXIE!	1700938769 using !!! >< Report Comment
4nja o_O	1700436481 this is so cute!! using :p Report Comment
xXZer0Xx	1700399556 USING :33 Report Comment
匚乇乇乇	1700378885 using :33 Report Comment
Eider !	1700359365 USIIING !!! Report Comment