botter le ballon

1,496 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

16 November 2024

Comment créer une barre latérale de grille en CSS

19 December 2025

Modèle de formulaire de connexion HTML avec connexion via les réseaux sociaux

30 December 2024

Un code par cleancloud199

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>          
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bola quicando</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100vw;
            height: 100vh;
            font-family: monospace;
            overflow: hidden;
            box-sizing: border-box;
        }

/* primeira bola (fica atras da outra identica, mas essa possui box-reflect para refletir)*/
        .bola-quicando {
            position: absolute;
            z-index: 1;
            box-sizing: border-box;
            -webkit-box-reflect: below;
            margin-top: 0.1px;
            background: radial-gradient(circle, #ffffff 50%, #e0e0e0 100%);
            box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7), 
                        inset 0 0 10px 2px rgba(255, 255, 255, 0.9),
                        0 0 30px 10px rgba(255, 255, 255, 0.5);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
         /* texto dentro da bola hover*/
        .bola-quicando::before {
            content: 'hover';
            font-size: 12px;
            color: #333;
            opacity: 0.7;
        }
         /* bola superior essa fica na frente mas nao possui reflexo*/
        .bola-superior {
            position: absolute;
            z-index: 5; 
            box-sizing: border-box;
            margin-top: 0.1px;
            background: radial-gradient(circle, #ffffff 60%, #f0f0f0 100%);
            box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.7), 
                        inset 0 0 10px 2px rgba(255, 255, 255, 0.9),
                        0 0 30px 10px rgba(255, 255, 255, 0.5);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        /*texto tambem*/
        .bola-superior::before {
            content: 'hover';
            font-size: 12px;
            color: #333;
            opacity: 0.7;
        }
         /*chao 100% transparente para poder ver o reflexo*/
        .chao {
            z-index: 3;
            height: 10vh;
            background: transparent; 
            position: absolute;
            width: 100vw;
            bottom: 0;
            left: 0;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5); 
        }
         /* classe da bola animada para ativar ao passar o mouse*/
        .bola-animada{
            animation: bounce 12s ease-in-out; 
        }
        /* remover o hover texto*/
        .bola-quicando.bola-animada::before,
        .bola-superior.bola-animada::before {
            content: ''; 
        }
        /* uma parede invisivel e toda preta, que fica acima do piso (essa parede serve como um intermediario entre a bola com reflexo e a sem reflexo, 
        desta forma a parte com reflexo sera escondida atras dela e a identica sem reflexo aparecerá na frente, e como ela está acima do chão ela vai 
        continuar mostrando o reflexo*/
        .parede{
            border: none;
            outline: none;
            position: absolute;
            height: 1000px;
            background: black;
            width: 600px;
            z-index: 4; 
            bottom: 10.4vh;
        }
        /* animacao que a IA fez para mim baseada na fisica real para bola quicar*/
        @keyframes bounce {
            0% {
                transform: translateY(0);
            }
            11.17% {
                transform: translateY(80vh);
            }
            20.08% {
                transform: translateY(28.8vh);
            }
            29.00% {
                transform: translateY(80vh);
            }
            36.17% {
                transform: translateY(47.232vh); 
            }
            43.33% {
                transform: translateY(80vh);
            }
            49.08% {
                transform: translateY(60.606vh); 
            }
            54.00% {
                transform: translateY(80vh);
            }
            58.22% {
                transform: translateY(70.254vh); 
            }
            62.00% {
                transform: translateY(80vh);
            }
            65.36% {
                transform: translateY(76.162vh); 
            }
            68.36% {
                transform: translateY(80vh);
            }
            70.99% {
                transform: translateY(79.099vh); 
            }
            73.33% {
                transform: translateY(80vh);
            }
            75.47% {
                transform: translateY(79.839vh); 
            }
            77.39% {
                transform: translateY(80vh);
            }
            79.13% {
                transform: translateY(79.975vh); 
            }
            80.73% {
                transform: translateY(80vh);
            }
            82.21% {
                transform: translateY(79.996vh);
            }
            83.60% {
                transform: translateY(80vh);
            }
            84.91% {
                transform: translateY(79.999vh); 
            }
            86.16% {
                transform: translateY(80vh);
            }
            87.35% {
                transform: translateY(80vh); 
            }
            88.50% {
                transform: translateY(80vh);
            }
            99.83% {
                transform: translateY(80vh); 
            }
            100% {
                transform: translateY(80vh);
            }
        }
    </style>
</head>
<body>
    
    <div class="parede"></div>
    <div class="bola-quicando" id="bola1"></div>
    <div class="bola-superior" id="bola2"></div>
    <div class="chao"></div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const bola1 = document.getElementById('bola1');
            const bola2 = document.getElementById('bola2');

function animarBolas() {
                bola1.classList.add('bola-animada');
                bola2.classList.add('bola-animada');
            }

function pararAnimacao() {
                setTimeout(function() {
                    bola1.classList.remove('bola-animada');
                    bola2.classList.remove('bola-animada');
                }, 12000); 
            }

bola1.addEventListener('mouseenter', function() {
                animarBolas();
                pararAnimacao();
            });
            
            bola2.addEventListener('mouseenter', function() {
                animarBolas();
                pararAnimacao();
            });
        });
    </script>
</body>
</html>

CSS