giant vinyl record spinning on your blog

Tags: layout, music, blog, vinyl, gif, cd, layout, animation, gif, animation

Description:

I don't know much about html for this design I had help from chatgtp you can put any other image for the album cover the transparent hole will always be made in the center of the image

preview

like this

or this

Credits are not necessary but comment if you plan to use it I want to see what it looks like

update : for spanish people im gona explain e visto mucha gente confusa en donde poner el link de la imagen en el disco en especial gente hispano hablante la razon fue pq hay una seccion en español q dice " portada de disco " perdon yo la puse como guia para no perderme en el codigo xd , pongan la ur donde dice "your-cover.jpg" y listo cualquier otro bug haganmelo saber :3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ¡! Madoka 🍥 (https://layouts.spacehey.com/layout?id=98493) -->

   


    
    
    <style>
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .vinyl-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }

        .vinyl {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #111;
            border: 10px solid #444;
            position: absolute;
            animation: rotate 5s infinite linear;
        }

        .center-hole {
            width: 40px;
            height: 40px;
            background-color: #111;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
        }

        .cover-container {
            width: 80%;
            height: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            border-radius: 50%;
        }

        .cover {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            animation: rotate 5s infinite linear;
        }

        .cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .cover-hole {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
        }
    </style>


    <div class="vinyl-container">
        <div class="vinyl">
            <div class="center-hole"></div>
        </div>
        <div class="cover-container">
            <div class="cover">
                <div class="cover-hole"></div>
                <img src="your-cover.jpg" alt="Portada del disco"/>
            </div>
        </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 140 comments ( View all | Add Comment )

hydraphoris	1742643112 just started to hold a grip of html, gonna use this base a lot 4 insp its the best !! Report Comment
wuuvii	1742383275 using Report Comment
jen	1741873427 using!! Report Comment
bunnie	1741750736 using Report Comment
Black_Swan_05	1741624750 Using Report Comment
°˖❀˚⋆Livvy⋆˚❀˖°	1741487991 USING AAGFJHGDJG THX Report Comment
Moon	1741202195 usingg Report Comment
Tsyuuna	1741182423 USSINGG Report Comment
Maye	1741103963 using! Report Comment
xwvbirdy	1740953341 using Report Comment
/ᐠ > ˕ <マAnna ₊˚⊹♡	1740924697 using Report Comment
Dina 🎀	1740879000 usingggg Report Comment
Emo_Girl^^	1740746944 TY Usingg<3 Report Comment
doa	1740495034 usingg Report Comment
flo!!	1739736998 usingg Report Comment Haii do you know how to add a picture for the vinyl?? by Angel; 1740148072; Report You have to put link here "your-cover.jpg" and here "Portada del disco" by Emo_Girl^^; 1740747064; Report
Zoeyy	1739728392 using Report Comment
Venus ☆	1738963060 Useing Report Comment
JivaXD	1738681989 using :3 Report Comment
S0ph9luvv	1738625051 using! <33 Report Comment
Boo	1738551795 using!! Report Comment