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

will✃	1721806458 using Report Comment
𝓛𝓮𝓲𝓪𝓱	1720926311 Using Report Comment
Fishie!!!	1720920381 using!! Report Comment
Fishie!!!	1720920381 using!! Report Comment
ARIZ🩷	1720591861 using Report Comment
sxull	1720093080 usingg! Report Comment
𝐡𝐚𝐲𝐥𝐞𝐲	1719270811 Might use<3 Report Comment
zombii♱	1718911555 using! Report Comment
ᡣ Valmiki.	1718497125 using ! Report Comment
✭ 𝙁𝙪𝙨𝙞𝙞𝙤𝙣 !!	1717874171 Usingg ! Report Comment
𝐑𝐀 𝐗𝐎𝐗𝐎	1717636561 using Report Comment
mawko	1717185561 using!! Report Comment
Rachel Amber	1716284074 using <3 Report Comment
♱𝔑𝔞𝔤𝔲𝔯𝔬♱	1715673670 Using!!!!! Report Comment
БОГ	1715631907 using Report Comment
🍓strawberryshortcake🍓	1715450535 using !! Report Comment
In3rn3t@ng3l	1714684806 Using! 🙏 Report Comment
Jordan.manoo	1714599343 prob using Report Comment
Noriaki 8039	1714156235 Using <3 Report Comment
¡! Madoka 🍥	1712940591 re tarde pero remplasen ¨your cover hole.jpg¨ por la direcion de la imagen Report Comment GRACIAS ( ToT ) by Andi_ebullici0n;p; 1716693531; Report