DVD

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 February 2024

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disco girando</title>
    <style>
        *{
            margin: 0;
            padding: 0;

}
        body{
            font-family: monospace;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background-color: black;
        }
        .disco-girando{
            width: 100px;
            height: 100px;
            border-radius: 100%;
            background: rgb(255, 255, 255);
            background-attachment: fixed;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: solid 3px gray;

}
        /* quando passar o mouse gire o cd e mostre o gradiente */
        .disco-girando:hover{
            transform: rotateY(180deg);
            transition: all 0.5s ease-in-out;
            animation: girarGradiente 5s linear infinite;
            animation-delay: 0.25s;
        }
        /* esconda o texto */
        .disco-girando:hover::before{
            animation: hideContent 0.5s linear forwards;

}
        /* escondendo usando o content do before */
        @keyframes hideContent{
            0%{content: 'PLAY ▶️';}
            100%{content: '';}
        }
        /* conic gradiente tirado de https://stackoverflow.com/questions/65363546/ */
        @keyframes girarGradiente{
            0%{
            background: conic-gradient(white, white, white, grey, grey, violet, deepskyblue, aqua, palegreen, yellow, orange, red, grey, grey, white, white, white, white, grey, grey, violet, deepskyblue, aqua, palegreen, yellow, orange, red, grey, grey, white);
            transform: rotateZ(0);
            }
            100%{
                background: conic-gradient(white, white, white, grey, grey, violet, deepskyblue, aqua, palegreen, yellow, orange, red, grey, grey, white, white, white, white, grey, grey, violet, deepskyblue, aqua, palegreen, yellow, orange, red, grey, grey, white);
                transform: rotateZ(360deg);
            }
        }
        /* centro do cd */
        .disco-girando::after{
            content: '';
            width: 25%;
            height: 25%;
            border-radius: 50%;
            position: relative;
            background: black;
            border: solid 3px gray;
            box-shadow: 0 0 5px grey;
            box-sizing: border-box;
        }
        /* texto do cd que gira, ja que o background do cd é uma cor solida, podemos girar apenas o textp
        e criar uma ilusão */
        .disco-girando::before{
            color: black;
            font-family: monospace;
            content: 'PLAY ▶️';
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: transparent;
            text-overflow:clip;
            animation: girarDisco 5s linear infinite;
            transform-origin: center;
            line-height: 20px;
            scale: 0.7;

}
        /*girar o texto em volta do centro */
        @keyframes girarDisco{
            0%{
                transform: rotateZ(0);
            }
            100%{
                transform: rotateZ(360deg);
            }
        }

</style>
</head>
<body>

</div>
    
</body>
</html>

DVD

Recommandé

Bouton de confirmation

Animation de texte CSS

Formulaire de connexion

HTML

CSS

JS

Recommandé

Bouton de confirmation

Animation de texte CSS

Formulaire de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS