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

dispensergoindown	1755654451 using Report Comment
Adethious	1755553184 using ty Report Comment
byn 🐞	1755237672 using!! Report Comment
⋆. 𐙚𝓼𝓽𝓻𝓪𝔀𝓫𝓮𝓻𝓻𝔂_𝓼𝓪𝓶𝓶𝓲𝓮 ˚ ༘	1755193269 Usando Report Comment
ꉂ`𖦹.AZZY🔪.⋆♱	1753990323 using!! Report Comment
ʍɿʍɿՇԾ	1753607141 Using!! ᰔ Report Comment
𝜗𝜚 ࣪Princess Saki˖ ִ𐙚	1753519017 usinggggg Report Comment
penni	1753507892 usin!! Report Comment
‎˖ ࣪⊹𐙚 𝒜kanᧉ	1753356931 using Report Comment
✪𝐒𝐜𝐚𝐫𝐥𝐞𝐭𝐭 ✪	1753196160 using Report Comment
Anya	1753035889 using!! Report Comment
Dead_star☆☆	1752722434 Using this :D Report Comment
nico<3	1752719628 Using!!:3 Report Comment
Zhi	1751908046 using! Report Comment heyy how do u change the image on it? Out of curiosity. by Gelaa🫧; 1752446173; Report
heerrrr	1751807662 usinggg Report Comment
T-08	1751736062 Using Report Comment
𖤐⋆˙MunkY ᶻ 𝗓 𐰁	1751246779 Using! Report Comment
Crystal ༣	1750406402 using Report Comment
Zayn :33	1749899184 usinggg Report Comment
4L0R3_555	1749489057 usinggg Report Comment