Exemplo de animação de esfera em HTML CSS

423 ByBy.inc

Abrir no Editor Publique Seu Código

Exemplo de animação de esfera em HTML CSS

Recomendado

27 November 2024

gerador de citações

23 August 2025

Blog de Sistemas e Redes de TI | NetCore Solutions

24 July 2025

carregamento 3D do fone de ouvido

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background-color: #181b23;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #272822;
      color: #F8F8F2;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 18px;
      padding: 20px;
      border-radius: 8px;
      white-space: pre-line;
      text-align: left;
      line-height: 1.6;
      max-height: 25%;
      min-width: 100%;
      width: 100%;
      overflow-y: auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .brace          { color: #F8F8F2; }
    .comment        { color: #75715E; }
    .function       { color: #A6E22E; }

.animation-container {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

.sphere {
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      opacity: 0;
      /* Transição suave para a aparência das esferas */
      transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    }

.sphere:nth-child(1) {
      background-color:  #FF5858;
      animation: pulsing  2s ease-in-out infinite;
      animation-delay: 0s;
    }

.sphere:nth-child(2) {
      background-color: #80D8FF;
      animation: pulsing 2s ease-in-out infinite;
      animation-delay: 0.3s;
    }

.sphere:nth-child(3) {
      background-color:  #66D9EF; 
      animation: pulsing 2s ease-in-out infinite;
      animation-delay: 0.6s;
    }

@keyframes pulsing {
      0% {
        transform: scale(1);
        opacity: 0;
      }
      50% {
        transform: scale(1.15);
        opacity: 1;
       
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }

Recomendado

gerador de citações

Blog de Sistemas e Redes de TI | NetCore Solutions

carregamento 3D do fone de ouvido

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS