सीएसएस एनिमेशन: "जब तक आप सफल न हो जाएं, तब तक नकली बने रहें"

22 ByBy.inc

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

सीएसएस एनिमेशन: "जब तक आप सफल न हो जाएं, तब तक नकली बने रहें"

अनुशंसित

30 August 2024

लॉगिन फॉर्म कॉमिक

HTML

CSS

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

body {
      background-color: #16181A; 
      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%;
      max-width: 90%;
      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;
    }

.codeblock {
      animation-name: fri_kernel_codePulse;
      animation-duration: 4s;
      animation-delay: 0.5s;
      animation-timing-function: cubic-bezier(.19, 1, 1, .56);
      animation-iteration-count: infinite;
      mix-blend-mode: difference; /*  
   --> Cria um efeito de distorção e desfoca o código, como se fosse uma ilusão */
    }

.opacity-layer {
     opacity: 0; animation-timing-function: ease-out; 
     animation-duration: 1s;
     animation-fill-mode: forwards;
     animation-delay: 1s;
    }

@keyframes fri_kernel_codePulse {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(2deg); opacity: 0.9; }
      20% { transform: rotate(-2deg); opacity: 0.8; }
      30% { transform: rotate(0deg); opacity: 0.7; }

100% {
        transform: rotate(0deg); 
        opacity: 0.9;
      }
    }

@keyframes fri_kernel_promptSlide {
          0% { transform: translateX(-100%); opacity: 0; } 
          50% { transform: translateX(0); opacity: 1;  } 
          100% { transform: translateX(0);  opacity: 0; animation-delay: 4s;
  }   
    }

सीएसएस एनिमेशन: "जब तक आप सफल न हो जाएं, तब तक नकली बने रहें"

अनुशंसित

स्लाइडर लंबन प्रभाव

एक लैवेंडर होम पेज

लॉगिन फॉर्म कॉमिक

HTML

CSS

JS

अनुशंसित

स्लाइडर लंबन प्रभाव

एक लैवेंडर होम पेज

लॉगिन फॉर्म कॉमिक

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS