Animación de texto CSS: efecto eco

1,327 byby.createsite

Abrir en el editor Publica tu código

Recomendado

20 May 2025

Un código de Skyrreum

10 March 2026

Gancho de Stickman

14 September 2024

Control deslizante flotante

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      background-color: #212F45;
      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: 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;
    }

.memory-fragment {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      clip-path: circle(50% at 50% 50%);
      animation: mon_memory_drift 5s linear infinite;
    }
    
    .fragment-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      color: #F8F8F2;
      animation: mon_text_fade 3s ease-in-out infinite alternate;
    }

@keyframes mon_memory_drift {
      0% {
        transform: translate(0, 0); 
        opacity: 1; 
      }
      50% {
        transform: translate(10px, -10px);
        opacity: 0.8; /* Cria uma sensação de impermanência */
      }
      100% {
        transform: translate(0, 0); 
        opacity: 1; 
      }
    }

@keyframes mon_text_fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }