botter le ballon

261 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

2 March 2024

Application de traduction simple (anglais vers ourdou)

25 May 2025

Meilleur portfolio avec connexion et publications système

17 September 2023

Icônes sociales animées

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>

botter le ballon

Recommandé

Application de traduction simple (anglais vers ourdou)

Meilleur portfolio avec connexion et publications système

Icônes sociales animées

HTML

CSS

JS

Recommandé

Application de traduction simple (anglais vers ourdou)

Meilleur portfolio avec connexion et publications système

Icônes sociales animées

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS