patear la pelota

946 byby.createsite

Abrir en el editor Video Publica tu código

Recomendado

7 November 2024

Clasificación de estrellas

28 May 2025

Formulario de inicio de sesión futurista

5 December 2025

Formulario de ingreso de número de teléfono HTML con botón más

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>

patear la pelota

Recomendado

Clasificación de estrellas

Formulario de inicio de sesión futurista

Formulario de ingreso de número de teléfono HTML con botón más

HTML

CSS

JS

Recomendado

Clasificación de estrellas

Formulario de inicio de sesión futurista

Formulario de ingreso de número de teléfono HTML con botón más

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS