• 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
63 wizyt
pytanie zadane 13 września 2017 w HTML i CSS przez Damian Prymus Początkujący (270 p.)
edycja 13 września 2017 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 2017 przez EdeX Gaduła (4,040 p.)
komentarz 13 września 2017 przez Damian Prymus Początkujący (270 p.)
bardzo dziękuję :)
komentarz 15 września 2017 przez EdeX Gaduła (4,040 p.)

nie ma za co smiley

Podobne pytania

0 głosów
0 odpowiedzi 131 wizyt
pytanie zadane 22 stycznia 2017 w HTML i CSS przez achort2007 Nowicjusz (120 p.)
+1 głos
1 odpowiedź 89 wizyt
pytanie zadane 6 maja 2016 w HTML i CSS przez ernest4013 Gaduła (3,100 p.)
0 głosów
1 odpowiedź 45 wizyt
pytanie zadane 10 kwietnia 2017 w HTML i CSS przez Patryk Sadkowski Nowicjusz (200 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.
Ciekawy innych porad? Odwiedź tę stronę!

45,721 zapytań

86,116 odpowiedzi

171,967 komentarzy

22,180 pasjonatów

Przeglądających: 323
Pasjonatów: 19 Gości: 304

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.

...