Ejemplo HTML de animación de esfera CSS

1,278 byby.createsite

Abrir en el editor Publica tu código

Recomendado

13 December 2024

Un código de creativefunction305

15 December 2023

Juego de Pilas en JavaScript

25 June 2025

Un código de Mete

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