WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Design de Orbe
985
VietStrix
Abrir no Editor
Publique Seu Código
Recomendado
28 May 2025
Caneta de pena
21 June 2025
Contêiner de efeitos de luz HTML com CSS
7 August 2025
Mostradores de volume
HTML
Copy
Orbiting Electrons
VS
ReactJS
TailwindCSS
Python
Mobile
Server
Hone
CSS
Copy
<!-- Replace with your HTML Code (Leave empty if not needed) --> /* style.css */ @keyframes orbit-1 { 0% { transform: rotate(0deg) translateX(100px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); } } @keyframes orbit-2 { 0% { transform: rotate(0deg) translateX(150px) rotate(0deg); } 100% { transform: rotate(-360deg) translateX(150px) rotate(360deg); } } @keyframes orbit-3 { 0% { transform: rotate(0deg) translateX(200px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(200px) rotate(-360deg); } } @keyframes orbit-4 { 0% { transform: rotate(0deg) translateX(250px) rotate(0deg); } 100% { transform: rotate(-360deg) translateX(250px) rotate(360deg); } } @keyframes orbit-5 { 0% { transform: rotate(0deg) translateX(300px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(300px) rotate(-360deg); } } @keyframes orbit-6 { 0% { transform: rotate(0deg) translateX(350px) rotate(0deg); } 100% { transform: rotate(-360deg) translateX(350px) rotate(360deg); } } .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; position: relative; } .nucleus { width: 70px; height: 70px; border-radius: 50%; background-color: #059669; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; } .icon-nucleus { font-size: 24px; font-weight: bold; color: white; } .electron { position: absolute; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: #3490dc; animation-iteration-count: infinite; animation-timing-function: linear; transition: transform 0.5s ease, background-color 0.3s ease; } .electron:hover { background-color: #ffcc00; } .icon { width: 30px; height: 30px; color: white; } .orbit { position: absolute; width: 100px; /* Diameter of the orbit */ height: 100px; /* Diameter of the orbit */ border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.5s ease; } .orbit-1 { animation: orbit-1 4s linear infinite; } .orbit-2 { animation: orbit-2 6s linear infinite; } .orbit-3 { animation: orbit-3 8s linear infinite; } .orbit-4 { animation: orbit-4 10s linear infinite; } .orbit-5 { animation: orbit-5 12s linear infinite; } .orbit-6 { animation: orbit-6 14s linear infinite; } .orbit.align { animation: none; } .orbit-1.align .electron { transform: translateX(-150px) translateY(-100px); } .orbit-2.align .electron { transform: translateX(-90px) translateY(-100px); } .orbit-3.align .electron { transform: translateX(-30px) translateY(-100px); } .orbit-4.align .electron { transform: translateX(30px) translateY(-100px); } .orbit-5.align .electron { transform: translateX(90px) translateY(-100px); } .orbit-6.align .electron { transform: translateX(150px) translateY(-100px); } .orbit .electron:hover .popup { display: block; } .popup { display: none; position: absolute; top: -30px; /* Adjust this to position the popup */ left: 50%; transform: translateX(-50%); background-color: white; padding: 5px 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); white-space: nowrap; z-index: 20; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */ // script.js let isHovered = false; function handleMouseEnter() { isHovered = true; alignOrbits(); } function handleMouseLeave() { isHovered = false; alignOrbits(); } function alignOrbits() { const orbits = document.querySelectorAll('.orbit'); orbits.forEach((orbit, index) => { if (isHovered) { orbit.classList.add('align'); } else { orbit.classList.remove('align'); } }); }