Diseño Orb

613 VietStrix

Abrir en el editor Publica tu código

Recomendado

21 September 2025

Código de diseño HTML CSS Sunflower

15 August 2025

Estructura de diseño de CSS Office

23 August 2025

Plantilla HTML para diseño web, experiencia digital y podcast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orbiting Electrons</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<body>
    <div class="container">
        <div 
            class="nucleus"
            onmouseenter="handleMouseEnter()"
            onmouseleave="handleMouseLeave()"
        >
            <span class="icon-nucleus">VS</span>
        </div>

<div class="orbit orbit-1">
            <div class="electron">
                <i class="fa-brands fa-react"></i>
                <div class="popup">ReactJS</div>
            </div>
        </div>
        <div class="orbit orbit-2">
            <div class="electron">
                <i class="fa-brands fa-css3-alt"></i>
                <div class="popup">TailwindCSS</div>
            </div>
        </div>
        <div class="orbit orbit-3">
            <div class="electron">
                <i class="fa-brands fa-python"></i>
                <div class="popup">Python</div>
            </div>
        </div>
        <div class="orbit orbit-4">
            <div class="electron">
                <i class="fa-solid fa-mobile"></i>
                <div class="popup">Mobile</div>
            </div>
        </div>
        <div class="orbit orbit-5">
            <div class="electron">
                <i class="fa-solid fa-server"></i>
                <div class="popup">Server</div>
            </div>
        </div>
        <div class="orbit orbit-6">
            <div class="electron">
                <i class="fa-solid fa-house"></i>
                <div class="popup">Hone</div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* 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;
  }

Recomendado

Código de diseño HTML CSS Sunflower

Estructura de diseño de CSS Office

Plantilla HTML para diseño web, experiencia digital y podcast

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS