patear la pelota

541 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

23 August 2025

Código HTML y CSS de la página de inicio de sesión en turco

30 August 2024

Botón con efecto de desplazamiento de Drácula animado

23 August 2025

Plantilla HTML CSS para formulario de inicio de sesión y registro

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>

Recomendado

Código HTML y CSS de la página de inicio de sesión en turco

Botón con efecto de desplazamiento de Drácula animado

Plantilla HTML CSS para formulario de inicio de sesión y registro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS