3D टेक्स्ट एनिमेशन HTML स्निपेट

97 ByBy.inc

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

21 August 2024

क्रिएटिव HTML पोर्टफोलियो टेम्पलेट

20 May 2025

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

1 November 2024

साइड मेनू के साथ HTML पोर्टफोलियो वेबसाइट

HTML

CSS

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

.animation-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      overflow: hidden;
      background-color: #000;
    }

/* Estilos para o texto */
    .letra {
      font-size: 4em;
      font-weight: bold;
      color: #0f0; /* Verde */
      text-align: center;
      animation: morph 5s linear infinite; /* Executa o animation 'morph' infinitamente */
    }
    
    @keyframes morph { /* Animação customizada */
      0%   { transform: rotate(0deg) scale(1); letter-spacing: 0em; }
      25%  { transform: rotate(2deg) scale(1.1); letter-spacing: 0.2em; }
      50%  { transform: rotate(-2deg) scale(0.9); letter-spacing: -0.2em; }
      75%  { transform: rotate(2deg) scale(1.05); letter-spacing: 0.15em; }
      100% { transform: rotate(0deg) scale(1); letter-spacing: 0em; }
    }

अनुशंसित

क्रिएटिव HTML पोर्टफोलियो टेम्पलेट

आधुनिक ग्लासमोर्फिज्म लॉगिन फॉर्म html, css में

साइड मेनू के साथ HTML पोर्टफोलियो वेबसाइट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS