• 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

Ultraszybki serwer VPS NVMe START
0 głosów
57 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 Bywalec (2,290 p.)
komentarz 13 września przez Damian Prymus Nowicjusz (210 p.)
bardzo dziękuję :)
komentarz 15 września przez EdeX Bywalec (2,290 p.)

nie ma za co smiley

Podobne pytania

0 głosów
0 odpowiedzi 121 wizyt
pytanie zadane 22 stycznia 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,050 p.)
0 głosów
1 odpowiedź 44 wizyt
pytanie zadane 10 kwietnia w HTML i CSS przez Patryk Sadkowski Nowicjusz (200 p.)

41,530 zapytań

80,570 odpowiedzi

159,459 komentarzy

19,821 pasjonatów

Przeglądających: 305
Pasjonatów: 29 Gości: 276

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.

...