Exemple d'animation HTML de sphère CSS

1,431 byby.createsite

Remixer Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 May 2025

Un code par codex

11 April 2026

Structure HTML Sunflower CSS

28 September 2026

Émulateur Pokémon Émeraude pour Game Boy Advance en HTML et JavaScript

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