Design de Orbe

491 VietStrix

Abrir no Editor Publique Seu Código

Recomendado

25 June 2025

Um código de Mete

31 July 2025

Modelo HTML de página de login do Liquid Drop

30 June 2025

Produção de aço, indústria metalúrgica | Iron and Steel Inc.

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

Um código de Mete

Modelo HTML de página de login do Liquid Drop

Produção de aço, indústria metalúrgica | Iron and Steel Inc.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS