Chaîne animée

672 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 August 2024

Carte animée avec effet de survol 3D

30 April 2024

Modèle de notation des étoiles animées

5 July 2025

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mola animada</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
            font: monospace;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-border;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        .circle {
        width: 120px;
        height: 120px;
        border: 2px solid #fff; 
        border-radius: 50%;
        background: transparent; 
        box-shadow: 
            0 0 15px 3px rgba(255, 255, 255, 1), 
            0 6px 2px rgba(0, 0, 0, 0.4), 
            inset 0 0 1px rgba(255, 255, 255, 0.7);
        transform: perspective(600px) rotateX(60deg); 
        position: absolute;
    }

.circle:nth-child(1) { animation-delay: -0.55s; }
        .circle:nth-child(2) { animation-delay: -0.50s; }
        .circle:nth-child(3) { animation-delay: -0.45s; }
        .circle:nth-child(4) { animation-delay: -0.40s; }
        .circle:nth-child(5) { animation-delay: -0.35s; }
        .circle:nth-child(6) { animation-delay: -0.30s; }
        .circle:nth-child(7) { animation-delay: -0.25s; }
        .circle:nth-child(8) { animation-delay: -0.20s; }
        .circle:nth-child(9) { animation-delay: -0.1s; }
        .circle{
            animation: circleAnimation 1.2s linear alternate-reverse infinite;
            transform-origin: 180px;
        }
        @keyframes circleAnimation{
            0%{
                transform: rotateX(60deg) rotateY(0) translateX(0);  
            }
            5%{
                transform: rotateX(60deg) rotateY(0) translateX(0);  
            }
            895%{
                transform: rotateX(60deg) rotateY(180deg) translateX(1px);  
            }
            100%{
                transform: rotateX(60deg) rotateY(180deg) translateX(1px);  
            }
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
</body>
</html>

Chaîne animée

Recommandé

Carte animée avec effet de survol 3D

Modèle de notation des étoiles animées

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

HTML

CSS

JS

Recommandé

Carte animée avec effet de survol 3D

Modèle de notation des étoiles animées

Panneau de connexion moderne avec bordure animée et réinitialisation du mot de passe de TheDoc

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS