Design de Orbe

Abrir no Editor Publique Seu Código

Recomendado

3 March 2025

Animação CSS de texto gradiente

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

Design de Orbe

Recomendado

Caixa de pesquisa

Calculadora de Impostos Robux

Animação CSS de texto gradiente

HTML

CSS

JS

Recomendado

Caixa de pesquisa

Calculadora de Impostos Robux

Animação CSS de texto gradiente

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS