Tutoriaal

Holiii, hace muy poquito cambié mi anterior CD violeta por este CD de Love☆Com que reproduce el opening si tocan el botoncito de play, y la verdad se volvió uno de mis gadgets favoritos! Por eso quería dejarles aca el tutorial de cómo lo hice :)

Este es el código:

<div class="cd-player">

    <img id="cd" 

 src="LINK DE IMAGEN" />

    <div id="centerBtn">

        ▶

    </div>

    <video id="music" style="display:none;">

    <source src="LINK DE VIDEO EN MP4" type="video/mp4">

</source></video>

</div>

<style>

.cd-player{

    width:140px;

    margin:auto;

    position:relative;

}

#cd{

    width:140px;

    display:block;

    margin:auto;

    animation:spin 10s linear infinite;

}

#centerBtn{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:34px;

    height:34px;

    border-radius:50%;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(3px);

    border:3px solid rgba(255,255,255,.6);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:26px;

    color:#666;

    transition:.25s;

}

#centerBtn:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

.fast{

    animation-duration:5s !important;

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

</style>

<script>

const music=document.getElementById("music");

const btn=document.getElementById("centerBtn");

const cd=document.getElementById("cd");

btn.onclick=()=>{

if(music.paused){

music.play();

btn.innerHTML="❚❚";

cd.classList.add("fast");

}else{

music.pause();

btn.innerHTML="▶";

cd.classList.remove("fast");

}

}

music.onended=()=>{

btn.innerHTML="▶";

cd.classList.remove("fast");

}

</script>

Ahora bien, les explico cómo hice yo:

Yo use específicamente esta foto:

Que la encontré en Pinterest

Hay muchas así con distintos ánimes, lo pueden buscar como "CD anime"

Ahora, una vez q tenía la foto, la pase por una página de borrar fondo, yo use esta: https://www.photoroom.com/es/tools/background-remover 

Después, inserté la foto sin fondo en una entrada nueva de blogger (sin publicar), y de ahí hice click derecho y copiar dirección de imágen

Ese es el link que use para la imágen

Por otro lado, para la canción, use un video del opening que descargué de TikTok y lo puse en esta página: https://catbox.moe/ que me devolvió un enlace de mp4 para el video

Un detallito: no hace falta q el video tenga imágen transparente ni nada, el video está oculto y solo se usa para reproducir el audio

Eso sería lo principal, ahora, para ajustar el tamaño pueden modificar el número en el "width:140px" y para ajustar el tamaño del centro pueden modificar el número en:

width:34px;

height:34px;

Lo último sería la velocidad de giro. El CD está programado para girar un poquito más rápido cuando se reproduce la canción, esto pueden modificarlo acá: animation-duration:5s !important

Si el número es más cercano a 10, girará más lento, y si es más cercano a 1, más rápido :)

Espero que les sirva!

Nos leemos prontoo 💌