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

901 byby.createsite

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

अनुशंसित

23 August 2025

कप्पाडोसिया पैरालैक्स इवनिंग HTML/CSS

4 November 2024

नेवबार टेम्पलेट HTML CSS

10 January 2026

एआई स्टार्टअप नेविगेशन बार का HTML CSS कोड

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/CSS

नेवबार टेम्पलेट HTML CSS

एआई स्टार्टअप नेविगेशन बार का HTML CSS कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS