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

Zayn :33	1749899184 usinggg Report Comment
4L0R3_555	1749489057 usinggg Report Comment
4L0R3_555	1749489057 usinggg Report Comment
♱cora♱	1749223859 using Report Comment
JohnLennonstan/sam	1749031510 using!! Report Comment
Asukara.	1748572998 using! thanks a lot Report Comment
xvals.bonez	1747250074 using!! this is amazing :0 Report Comment
C.L.O.V.E.R	1746322635 using! Report Comment
C.L.O.V.E.R	1746322399 using! Report Comment
zombiechick	1745640313 USING !!! Report Comment
Kta	1745634449 Using Report Comment
catgirl	1744665842 using :3 Report Comment
Lina Ω	1744052902 how do I put the cover??? Report Comment
❁katzy❁ｚＺ	1743822132 usingg Report Comment
straw_hannie	1743679196 USINGGGGGGG ^^ Report Comment
𝖇𝖚𝖌𝖌𝖘𝖎𝖓𝖒𝖔𝖘𝖘	1743548074 using Report Comment
elilise	1743017731 usandoo Report Comment
RAYY★(Sakuya Izayoi enthusiast)	1742963013 Using Report 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