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

virgula	1764446250 using Report Comment
𝑹𝒂𝒛𝒛𝒚	1763867045 Usinggg! Report Comment
c0rpse 🫀⚒️	1763400883 usandoo :33 Report Comment
✩𝓒𝓻𝔂𝓫𝓪𝓫𝔂𝓪𝓷𝓰𝓮𝓵☆	1762528168 Usingg Report Comment
Lucien_TheMadness	1761159242 using! Report Comment
Cuteorangepie	1761066731 using/usando Report Comment
mimi ⋆.𐙚 ̊	1760561646 using <3 Report Comment
A⭐️💕	1760204363 Using Report Comment
★Punk Kitty★	1759876340 using! thank you Report Comment
Kaleidoscopexx	1758757882 Using!! Report Comment
Ari	1758166796 using Report Comment
ᯓ★ star	1757667334 using ! Report Comment
ricky	1757652858 using <3 Report Comment
Meweja<33	1757533069 usandoo Report Comment
xX_d4nte_Xx	1756810467 using Report Comment
Lily	1756488651 Using Report Comment
dispensergoindown	1755654451 using Report Comment
Adethious	1755553184 using ty Report Comment
robyn 🦈	1755237672 using!! Report Comment
⋆. 𐙚𝓼𝓽𝓻𝓪𝔀𝓫𝓮𝓻𝓻𝔂_𝓼𝓪𝓶𝓶𝓲𝓮 ˚ ༘	1755193269 Usando Report Comment