Пишущая машинка анимация, удаляющая часть буквы - PullRequest
Новая
       172

Пишущая машинка анимация, удаляющая часть буквы

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

Я использую приведенный ниже код для отображения эффекта анимации пишущей машинки (источник https://codepen.io/thiagoteles/pen/ogoxLw). Я специально настроил все на медленную скорость для более четких результатов. Все работает нормально, но каждая буква, появляющаяся одна за другой, не видна полностью, потому что курсор справа всегда стирает какую-то ее часть. Есть ли способ исправить это с помощью чистого css или мне нужно использовать javascript? Спасибо 

/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */
html{
  min-height: 100%;
  overflow: hidden;
}
body{
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255,255,255,.75);
  font-family:'Anonymous Pro' ,monospace ;  
  background-color: black;  
}
.line-1{
    position: relative;
    top: 50%;  
    width: 24em;
    margin: 0 auto;
    border-right: 4px solid green;
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);    
}

/* Animation */
.anim-typewriter{
  animation: typewriter 100s steps(44) 1s 1 normal both,
             blinkTextCursor 1000ms steps(544) infinite normal;
}
@keyframes typewriter{
  from{width: 0;}
  to{width: 24em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: green;}
  to{border-right-color: transparent;}
}
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'>
    <title>
    Test
    </title>
    </head>
    <body>
    <p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
    </body>
    </html>

1 Ответ

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

При использовании шрифта monspace вам нужно учитывать ch для определения ширины, потому что 1ch - это ширина 1 символа. Также отрегулируйте шаг, чтобы добавить start

/* Google Fonts */

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */

html {
  min-height: 100%;
  overflow: hidden;
}

body {
  height: calc(100vh - 8em);
  padding: 4em;
  color: rgba(255, 255, 255, .75);
  font-family: 'Anonymous Pro' ,monospace;
  background-color: black;
}

.line-1 {
  position: relative;
  top: 50%;
  margin: 0 auto;
  width: 0;
  border-right: 4px solid green;
  font-size: 180%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
}


/* Animation */

.anim-typewriter {
  animation: 
   typewriter 45s steps(44,start) 1s forwards, 
   blinkTextCursor 0.3s steps(15) infinite;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 44ch;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: green;
  }
  to {
    border-right-color: transparent;
  }
}
  <p class="line-1 anim-typewriter">Animation typewriter style using css steps()</p>
...