WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
ícone de carregamento 2
810
byby.createsite
Abrir no Editor
Publique Seu Código
Recomendado
18 October 2025
Exemplo de HTML do botão Rainbow Hover
10 February 2025
Um código por bachir123
17 July 2025
Página de login do CoffeeShop com efeito de vidro e Tailwind
HTML
Copy
<div class="container"> <div class="circle"></div> <div class="circle2"></div> </div>
CSS
Copy
*{ margin: 0; padding: 0; } body{ background-color: transparent; width: 100vw; height: 100vh; font-family:'Courier New', Courier, monospace; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .container{ display: flex; width: 40px; height: 20px; align-items: center; justify-content: center; } .circle{ background: red; opacity: 0.95; border-radius: 50%; width: 10px; height: 10px; animation: rotateRed 1.2s linear infinite; } .circle2{ background: cyan; opacity: 0.95; border-radius:50%; width: 10px; height: 10px; mix-blend-mode: darken; animation: rotateCyan 1.2s linear infinite; } @keyframes rotateRed{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 1.15;transform: translateX(20%);} 50%{transform: translateX(100%);} 51%{scale: 1;} } @keyframes rotateCyan{ 0%,100%{transform: translateX(0);scale: 1;} 10%{scale: 0.85;transform: translateX(-20%);} 50%{transform: translateX(-100%)} 51%{scale: 1;} }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
