• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animowany efekt wprowadzanego tekstu-jak w wordzie

0 głosów
54 wizyt
pytanie zadane 13 września w HTML i CSS przez Damian Prymus Nowicjusz (210 p.)
edycja 13 września przez Damian Prymus

Witam, chciałbym prosić o pomoc. A więc, chce zrobic tekst który będzie miał animację. która będzie wprowadzała literkę po literce. Mam cały  kod.  ale on wyświetla tylko  określoną liczbę znaków przez siebie. a jak chce się w stepie dać więcej znaków to i tak nie działa. A chcę tych znaków ponad 300. kilkoma słowami to nie wiem dla czego tak się dzieje, skoro mam zdeklarowane ze ma być ponad 300 , a robi inaczej. Z góry dziękuję. 


p{
  color: lime; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

p:nth-child(2){
  animation: type2 8s steps(60, end);
}

p a{
  color: lime;
  text-decoration: none;
}

span{
  animation: blink 1s infinite;
}

@keyframes type{ 
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>gotowiec</title>

<link href="css/style.css" rel="stylesheet">
	  </head>
  <body>
  <p>
 Lorem ipsum dolor sit amet neque. Duis vel quam. Cum sociis natoque penatibus et turpis. Nullam at quam. </p><p>Pellentesque ac posuere orci at ipsum scelerisque pede turpis sed quam in augue. Donec pede. Etiam condimentum lorem semper magna iaculis augue. Suspendisse molestie. Quisque in velit eleifend purus dolor in est id felis. Aliquam erat in faucibus scelerisque. Vestibulum ullamcorper fringilla, nibh.
   <span><span>
   </p>
</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 13 września przez EdeX Obywatel (1,480 p.)
komentarz 13 września przez Damian Prymus Nowicjusz (210 p.)
bardzo dziękuję :)
komentarz 6 dni temu przez EdeX Obywatel (1,480 p.)

nie ma za co smiley

Podobne pytania

0 głosów
0 odpowiedzi 111 wizyt
pytanie zadane 22 stycznia w HTML i CSS przez achort2007 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 44 wizyt
pytanie zadane 10 kwietnia w HTML i CSS przez Patryk Sadkowski Nowicjusz (200 p.)
0 głosów
4 odpowiedzi 106 wizyt
pytanie zadane 30 listopada 2016 w HTML i CSS przez ShadoWs Bywalec (2,000 p.)
Obowiązuje już zaktualizowany regulamin.

Czy wiesz, że nie musisz już odświeżać strony głównej?

Lista pytań i odpowiedzi aktualizuje się automatycznie!

38,563 zapytań

76,428 odpowiedzi

149,242 komentarzy

18,032 pasjonatów

Przeglądających: 208
Pasjonatów: 7 Gości: 201

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...