Esempio di contenitore di animazione CSS

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

28 December 2024

Struttura HTML del contenitore di animazione CSS

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #1a1a1a;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }
    .codigo {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: #222;
      color: #eee;
      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: 50%;
      width: 100%;
      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;
    }
    .el1 {
      position: absolute;
      width: 200px;
      height: 200px;
      background: #F8F8F2;
      border-radius: 50%;
      transform-origin: center;
      animation: pulse 2s infinite alternate;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    .el2 {
      position: absolute;
      width: 150px;
      height: 150px;
      background: #272822;
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 50%);
      transform-origin: center;
      animation: rotate-and-expand 4s infinite;
      animation-delay: 1s;
    }
    @keyframes rotate-and-expand {
      0% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(45deg) scale(1.2); }
      50% { transform: rotate(90deg) scale(0.9); }
      75% { transform: rotate(135deg) scale(1.1); }
      100% { transform: rotate(180deg) scale(1); }
    }
    .el3 {
      position: absolute;
      width: 320px;
      height: 100px;
      background: linear-gradient(to right, #66D9EF, #16BDF8);
      border-radius: 10px;
      opacity: 0;
      animation: fade-in-out 3s infinite;
      animation-delay: 2s;
    }
    @keyframes fade-in-out {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }

Esempio di contenitore di animazione CSS

Consigliato

Un codice di staticdata256

Disposizione delle colonne

Struttura HTML del contenitore di animazione CSS

HTML

CSS

JS

Consigliato

Un codice di staticdata256

Disposizione delle colonne

Struttura HTML del contenitore di animazione CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS