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

In3rn3t@ng3l	1714684806 Using! 🙏 Report Comment
Jordan.man	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
0lIver	1712863517 usingg Report Comment
⋆˚࿔ akari 𝜗𝜚˚⋆	1712363869 USING OMG Report Comment
DeepWaters	1711923015 Using ! Report Comment
DamonIsMyRadar	1711164832 USING! Report Comment
~ᧁꪮꪮ᥇ꫀ᥅~	1710717910 USING Report Comment
SNOVISKOH	1710637764 USING!! :D Report Comment
✮𝓛𝓸𝓷𝓮𝓵𝔂𝓟𝓮𝓻𝓼𝓸𝓷:(✭	1709864195 Using Report Comment
gaile	1709689941 how do u put an image over it? Report Comment
Mafer ♪	1709322878 Usando Report Comment
Ashe!	1709066726 hey do you know how to change the image on the record? Report Comment
aresito	1708439145 SOMEONE KNOWS THE NAME OF THE CURSOR???? ALGUIEN SABE EL NOMBRE DEL CURSOR???? Report Comment use el codigo de un layout de minecraft by ꒰ᐢ. .ᐢ꒱Madoka₊˚⊹; 1708538321; Report
key	1708213118 using !! Report Comment
Cleo	1707888852 Using ~ Report Comment
Curious!! XD	1707794465 Using Report Comment
ARLET★º	1707783046 usando Report Comment
ARLET★º	1707783045 usando Report Comment