CSS Text Animation: Echo Effect

Open In Editor Publish Your Code

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

CSS Text Animation: Echo Effect

Recommended

Bubble Button Effect

CSS Thought Bubble Animation

CSS Loading Animation Snippet

HTML

CSS

JS

Recommended

Bubble Button Effect

CSS Thought Bubble Animation

CSS Loading Animation Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS