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

844 byby.createsite

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

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

अनुशंसित

16 December 2024

स्मार्टफंक्शन263 द्वारा एक कोड

28 November 2024

CSS फ्लोटिंग इंटरफ़ेस एनीमेशन

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

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

अनुशंसित

स्मार्टफंक्शन263 द्वारा एक कोड

एनिमेटेड मेनू

CSS फ्लोटिंग इंटरफ़ेस एनीमेशन

HTML

CSS

JS

अनुशंसित

स्मार्टफंक्शन263 द्वारा एक कोड

एनिमेटेड मेनू

CSS फ्लोटिंग इंटरफ़ेस एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS