WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
ícone de carregamento 2
847
byby.createsite
Abrir no Editor
Publique Seu Código
Recomendado
16 April 2025
Um Código de Metehan
12 August 2025
Formulário de login HTML com fundo de matriz
13 December 2025
Lumina Retail HTML: Interface de usuário para produtos de tecnologia e compras
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) */
