CSS - Эффект пишущей машинки с текстом всегда в центре - PullRequest
Новая
       9

CSS - Эффект пишущей машинки с текстом всегда в центре

2 голосов
/ 05 мая 2020

Итак, я нашел следующий пример на net, и он отлично работает, за исключением одного факта, который я хотел бы добавить. Левая буква всегда движется и центрируется по мере того, как применяется эффект пишущей машинки, но я бы хотел, чтобы мой текст всегда был по центру, а его буквы отображались слева направо. Как я могу это добавить? 

/* 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%
  }
}
<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>

1 Ответ

2 голосов
/ 05 мая 2020

Установите margin-left на 0 вместо auto. 

/* 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;
  margin-right: 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%
  }
}
<div class="typewriter">
  <h1>The cat and the hat.</h1>
</div>
...