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

Ruse	1738245738 using!! Report Comment
R♡M4NC3	1738191003 Using Report Comment
D3st1nyy1	1738007041 usinggg!!<3 Report Comment
Rietveldd (READ PINNED)	1737593527 how do i get the image to center and aling on the record? Report Comment
lil_mooyor97	1737547658 using Report Comment
☆🍓Aliciakawaii20🍓☆	1737505600 using Report Comment
Caelyn	1737316135 using! Report Comment
yearning god	1737265378 using!!! so cutee Report Comment
TORII	1737210676 Using Report Comment
✩𝒱𝒾𝒶✩	1737194231 Using Report Comment
Jamie	1737192122 using Report Comment
Emss	1736692920 usinng Report Comment
☆★𝐜𝐚𝐧𝐧𝐚𝐛!𝐬_𝐩!𝐥𝐥𝐳:𝟑★☆	1736542295 Using:333 Report Comment
Rae >.<	1736085285 NOT USING BUT THE SMITHS MENTIONED!1!1!1! Report Comment
xxniixio.u	1735869030 using >_< Report Comment
⋆vacryl⋆	1735118314 using!!! Report Comment
yuri	1734523445 using!!! Report Comment
elincia.	1734249968 using Report Comment
Solzsq	1734018721 using Report Comment
Vesper★	1733736136 Usinggg Report Comment