Bouncing DVD logo code example

VGMoose

View online: https://vgmoose.bdns.dev/dvd.html

This is using CSS animations, and no javascript, so it works embedded within an SVG, which can also be embedded within BDNS profiles.

Example on my profile: http://bdns.bio/vgmoose

Profile embed:

![dvd](https://vgmoose.bdns.dev/dvd.svg)

HTML/CSS:

<body>
<style>
body {
  margin: 0;
  background-color: darkblue;
  background: linear-gradient(to top, #3204fdba, #9907facc), darkblue no-repeat top center;
  width: 100%;
  height: 100%;
}

img, div {
  width: 110px;
  height: 66px;
}

.x {
  animation: x 6.5s linear infinite alternate;
}

.y {
  animation: y 3.5s linear infinite alternate;
}

@keyframes x {
  100% {
    transform: translateX( calc(400px - 110px) );
  }
}

@keyframes y {
  100% {
    transform: translateY( calc(400px - 66px) );
  }
}
</style>
<div class="x">
  <img class="y" src="https://vgmoose.bdns.dev/dvd_logo.png" alt="dvd" />
</div>
</body>

To learn more about CSS animations and keyframes, see this page: https://www.w3schools.com/css/css3_animations.asp

TheAndyboi

ooooooooo wowwwww, i dot understand any of this

TheAndyboi

I GOT IT TO HIT THE CORNER YAYAYAYSYSYSYDEYHFNJ

VGMoose

Here's a full screen version, for switch users: https://vgmoose.bdns.dev/dvd.html

Raven

Lol, Neat!