• 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

VPS Starter Arubacloud
0 głosów
1,216 wizyt
pytanie zadane 13 września 2017 w HTML i CSS przez Damian Prymus Początkujący (380 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 Mądrala (5,110 p.)
komentarz 13 września 2017 przez Damian Prymus Początkujący (380 p.)
bardzo dziękuję :)
komentarz 15 września 2017 przez EdeX Mądrala (5,110 p.)

nie ma za co smiley

Podobne pytania

0 głosów
0 odpowiedzi 924 wizyt
pytanie zadane 22 stycznia 2017 w HTML i CSS przez achort2007 Nowicjusz (170 p.)
0 głosów
0 odpowiedzi 178 wizyt
pytanie zadane 11 czerwca 2016 w JavaScript przez Bakr Mądrala (6,850 p.)
0 głosów
1 odpowiedź 200 wizyt

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...