Exemple d'animation HTML de sphère CSS

1,277 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 January 2024

Code CSS pour cartes animées

25 May 2025

Clone de Pinterest

26 February 2026

Modèle HTML de site web de films

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