Design de Orbe

Abrir no Editor Publique Seu Código

Recomendado

28 May 2025

Contêiner de efeitos de luz HTML com CSS

7 August 2025

<!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;
  }

Design de Orbe

Recomendado

Caneta de pena

Contêiner de efeitos de luz HTML com CSS

Mostradores de volume

HTML

CSS

JS

Recomendado

Caneta de pena

Contêiner de efeitos de luz HTML com CSS

Mostradores de volume

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS