Usual Egg's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Code for the dvd bouncer

I had fun making it and now I'm sharing it for anyone who might be interested in learning how it works or for anyone who wants to slap it into their own profile for the nostalgia.

<marquee class="tv" behavior="alternate" direction="down">
    <marquee behavior="alternate" direction="right">
        <div class="dvd"></div>
    </marquee>
</marquee>

<style>
    .tv {
        border: 1px solid #fafafa;
        background-color: #000;
        margin: 5px 0;
        height: 339px;
    }

    .dvd {
        width: 40px;
        height: 18px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmFmYWZhIiB2aWV3Qm94PSIwIDAgMjAwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMTMuOSAxNS41ODdzLTEzLjc0MyAxNi45MzgtMTMuMDQgMTguMDE4Yy45NzUtMS4wOC00LjkzNC0xOC4yMDMtNC45MzQtMTguMjAzcy0xLjIzMy0zLjYtNS4xMDItMTUuNDAxSDE3LjE4bC0yLjU2IDExLjA3OGgyMy44NzhjMTIuNDE1IDAgMTkuOTk1IDUuMTM3IDE3Ljg3OCAxNC4yMzgtMi4yODcgOS45MS0xMy4xMjMgMTQuMTQxLTI0LjY2NSAxNC4xNDFoLTQuMzE2bDUuNTUyLTI0LjIzMUgxMy42NTJMNS40NiA1MC42MjhoMjcuMzk4YzIwLjYxMiAwIDQwLjE2Ni0xMS4wNzcgNDMuNjkyLTI1LjMxMi42MTctMi42MTYuNTMtOS4xOTQtMS4wNTQtMTMuMDY1IDAtLjA5My0uMDkxLS4yNzEtLjE3OC0uNTM3LS4wODctLjA5NC0uMTc4LS43MjMuMTc4LS44MTUuMTcyLS4wOTIuNTI1LjI3MS41MjUuMzU4IDAgMCAuMTc5LjQ1Ny4zNTEuODE0bDE3LjQ0IDUwLjM2MiA0NC40MDQtNTEuMjY0IDE4Ljc2MS0uMDkyaDQuNTc5YzEyLjQyNCAwIDIwLjA5IDUuMTM3IDE3Ljk2OSAxNC4yMzgtMi4yOSA5LjkxLTEzLjIwNSAxNC4xNC0yNC43NSAxNC4xNGgtNC40MDVsNS42MzUtMjQuMjNoLTE5LjI4N2wtOC4xOTggMzUuNDAyaDI3LjM5OGMyMC42MTEgMCA0MC4zNDMtMTEuMDc3IDQzLjYwNC0yNS4zMTIgMy4zNDctMTQuMjM4LTExLjEwMS0yNS4zMTctMzEuODktMjUuMzE3aC00MC44N0MxMTUuOTI4IDEzLjA1OCAxMTMuOSAxNS41ODUgMTEzLjkgMTUuNTg1ek05NC40MjkgNjIuNjE0QzQyLjI4NiA2Mi42MTQuMDA1IDY4Ljc0LjAwNSA3Ni4zMWMwIDcuNTY1IDQyLjI4MSAxMy42OTEgOTQuNDI0IDEzLjY5MSA1Mi4yMzkgMCA5NC41MjQtNi4xMjYgOTQuNTI0LTEzLjY5MS4wMDEtNy41Ny00Mi4yODQtMTMuNjk2LTk0LjUyNC0xMy42OTZ6bS0zLjM0NiAxOC41NjFjLTExLjk4IDAtMjEuNTgtMi4wNzQtMjEuNTgtNC42czkuNTk5LTQuNTk0IDIxLjU4LTQuNTk0YzExLjg4OCAwIDIxLjQ5OCAyLjA2OCAyMS40OTggNC41OTUgMCAyLjUyNS05LjYxIDQuNTk5LTIxLjQ5OCA0LjU5OXoiLz48L3N2Zz4=")
    }
</style>


8 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

Time Life Magazines

Time Life Magazines's profile picture

The other day I was watching the Hulu screensaver, which is just a bouncer like this, but it made me so angry. It's actually just a video loop. There's a section where they ever so slightly curve it's path to perfectly line up with where the loop begins. What's even more criminal is that their logo never hits the corner of the screen. What heathens!


Report Comment



That is so evil! Seriously super villain tier shit

by Usual Egg; ; Report