CSS - Сделать центрированный текст похожим на пишущую машинку - PullRequest
Новая
       6

CSS - Сделать центрированный текст похожим на пишущую машинку

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

Я пытаюсь сделать так, чтобы в центрированном однострочном тексте буквы появлялись одна за другой с курсором справа. Я использую этот код ниже, но у него есть некоторые проблемы, которые я пока не могу исправить:

1) Текст сначала не центрируется, хотя я использую text-align: center, но находится слева, а затем переходит в центр

2) Текст сначала отображается не в одной строке, а в нескольких строках. 

.header {
  background-color: black;
  padding: 2%;
  text-align: center;
}
.test {
  color: white;
  overflow: hidden;
  font-size:25px;
  border-right:2px solid #7CDD26;
  animation-delay: 2s;
  animation-duration: 12s;
  animation-fill-mode: both;
  animation-name: spin1;
}
@-webkit-keyframes spin1 {
  0% {width:0px;border-right:0px;}
  1% {width:0px;border-right:2px solid #7CDD26;}
  99% {width:400px;border-right:2px solid #7CDD26;}
}
<div class="header">
  <div class="test">This is a test.</div>
</div>

1 Ответ

1 голос
/ 05 мая 2020

For (a) - Поскольку вы устанавливаете свойство width на элемент уровня блока (div), вам необходимо сделать отступ до auto, чтобы центрировать элемент. Свойство text-align центрирует текст внутри контейнера, а не сам контейнер.

Что касается (b) - вы уже установили свойство overflow, но, поскольку вы не установили height, начальное значение auto.

Таким образом, ваш код может быть адаптирован к этому: 

.header {
  background-color: black;
  padding: 2%;
  text-align: center;
}
.test {
  color: white;
  overflow: hidden;
  font-size:25px;
  border-right:2px solid #7CDD26;
  animation-delay: 2s;
  animation-duration: 12s;
  animation-fill-mode: both;
  animation-name: spin1;
margin: auto;
height: 25px;
}
@-webkit-keyframes spin1 { 
  from {width:0px;border-right:0px;}
  to {width:400px;border-right:2px solid #7CDD26;}
}
<div class="header">
  <div class="test">This is a test.</div>
</div>

Надеюсь, что это поможет!

...