CSS फ़ोकस पॉइंट एनीमेशन स्निपेट

618 byby.createsite

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

14 September 2024

CSS सोशल मीडिया नेविगेशन बार

HTML

CSS

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

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

.focuspoint {position: absolute;
      width: 50px; height: 50px; border-radius: 50%; background: #88D8FF; animation: mon_focus_shift 1s infinite alternate; }
    
    /* Simula a sensação de "pular" entre elementos e pensamentos */
  @keyframes mon_focus_shift {
    0% { 
      transform: translate(0, 0) ;
      opacity: 1; /* Começa transparente */
    }
    50% { 
      transform: translate(-5px, 10px); 
      opacity: 0.5; /* Transitions para mais transparente */
    }
    100% { 
      transform: translate(0, 0);
      opacity: 1; /* Volta ao normal */
    }

}

.snippet {position: absolute;
      width: 100%; height: 10%; left: 0; top: 50%; transform: translateY(-50%); animation: mon_fragment_scan 
      2s infinite linear; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMTAiIGN5PSIwIiByPSIyMCIgc3Ryb2tlPSIjYmQwNDQ5IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJyb21hciIvPgo8L3N2Zz4="); /* Um gráfico aleatório, como fundo mental */
    
}

@keyframes mon_fragment_scan {
      
      0% {transform: translatex(-100%); opacity: 0.1;} /* Entra à partir da esquerda, quase invisível */
      50% {transform: translatex(0); opacity: 1; } /*Chega e fica transparente */
      100% {transform: translatex(100%); opacity: 0.1; } /* Sai por  a direita, quase invisível */

}

CSS फ़ोकस पॉइंट एनीमेशन स्निपेट

अनुशंसित

हृदय गति रेखा एनीमेशन

HTML एनीमेशन कंटेनर उदाहरण

CSS सोशल मीडिया नेविगेशन बार

HTML

CSS

JS

अनुशंसित

हृदय गति रेखा एनीमेशन

HTML एनीमेशन कंटेनर उदाहरण

CSS सोशल मीडिया नेविगेशन बार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS