Ejemplo HTML de animación de esfera CSS

949 byby.createsite

Abrir en el editor Publica tu código

Recomendado

27 June 2025

Ejemplo de página web de portafolio

22 August 2025

Comentario de marcador de posición de código HTML

25 July 2025

Selector de temas de modo oscuro con LocalStorage

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