basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Hallo Community ich habe diese Webseite gefunden... <a href="www.hinnendahl.com">www.hinnendahl.com</a> schaut euch da mal bitte die Cookie Anfrage an..- Diese Animation hätte ich gere für meinen gesamten text auf der webseite... Wie ist das Umzusetzen?

    Code

                                        
                                    <style>
      /* GLOBAL STYLES */
    body {
      background: #333;
      padding-top: 5em;
      display: flex;
      justify-content: center;
    }
    
    /* DEMO-SPECIFIC STYLES */
    .typewriter h1 {
      color: #fff;
      font-family: monospace;
      overflow: hidden; /* Ensures the content is not revealed until the animation */
      border-right: .15em solid orange; /* The typwriter cursor */
      white-space: nowrap; /* Keeps the content on a single line */
      margin: 0 auto; /* Gives that scrolling effect as the typing happens */
      letter-spacing: .15em; /* Adjust as needed */
      animation: 
        typing 3.5s steps(30, end),
        blink-caret .5s step-end infinite;
    }
    
    /* The typing effect */
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
    
    /* The typewriter cursor effect */
    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: orange }
    }
      </style>
    <div class="typewriter">
      <h1>The cat and the hat.</h1>
    </div>