CSS zanika w przejściu
Wprowadzenie do HTML i CSS:
Kod HTML ma różne elementy, takie jak tekst, obrazy, filmy, animacje, akapity itp. Ponieważ inne języki programowania mają zapytania lub kody, HTML zawiera znaczniki. Użytkownik musi mieć wiedzę na temat podstawowych tagów HTML. Podstawowa składnia tagów HTML to:
HTML ma dwie sekcje: części głowy i ciała. Z drugiej strony używamy CSS z tagiem otwierającym i zamykającym . Arkusz stylów kaskadowych (CSS) zawiera trzy dalsze typy stylów: wbudowane, wewnętrzne i zewnętrzne CSS. Winline CSS jest tym, który jest zadeklarowany wewnątrz znacznika HTML zapisanego w sekcji ciała. Drugi to znacznik wewnętrzny, który jest zadeklarowany w części głowicy znacznika HTML. Trzeci jest zewnętrzny, ponieważ nazwa pokazuje, że jest zadeklarowana w innym pliku poza znacznikiem HTML. Cały ten przegląd jest podany, ponieważ użytkownik powinien wiedzieć o rodzajach deklaracji CSS. Ponieważ użyliśmy dwóch pierwszych rodzajów CSS, które są wbudowane i wewnętrzne CSS, w tym artykule.
Znikaj w przejściu:
Fade to wyjątkowa właściwość CSS, która sprawia, że treść HTML znika. Celem korzystania z właściwości FADE jest zwrócenie uwagi użytkownika lub powiadomienie użytkownika z pewnymi informacjami. Ten efekt zanika różni się od efektu migania, ponieważ migająca właściwość powoduje, że treść utrzymuje proces poszukiwania skóry. Ale właściwość Fade pojawia się kiedy. Głównie właściwość przejściowa jest używana na obciążeniu strony internetowej. Innymi słowy, w miarę ładowania strony internetowej strona początkowo jest pusta.
Właściwość przejściowa, ustawiając krycie na 1, gdy strona jest załadowana:
Jest to metodologia, w której ciało jest ustawione na krycie 0 na poziomie początkowym. Następnie właściwość przejściowa jest tutaj używana w celu animentacji właściwości przejściowej, gdy zostanie zmieniona. Korzystając z zdarzenia Onload, ustawiamy właściwość krycia jako 1 po załadowaniu strony internetowej. Z powodu przejścia zmiana krycia, którą stosujemy w CSS, zostanie wykorzystana do zanikania strony.
Przykład:
Użyliśmy prostego przykładu do rozwinięcia działania efektów zanikania na przejście. Możemy użyć dowolnego efektu, aby pokazać zawartość zanikania HTML. W tym przykładzie użyliśmy prostych tekstów w postaci nagłówka i akapitów. Teraz zrozummy kod HTML i CSS, który jest używany do osiągnięcia efektu zanikania w przejściu.
W sekcji Head wspominamy o tytule strony. Następnie używane są tagi stylowe. Ten tryb stylu jest stylizacji wewnętrznej, ponieważ cały kod jest zdefiniowany w znaczniku głowy. Wewnątrz stylu celowaliśmy całe ciało HTML, na którym zastosowaliśmy efekt krycia 0. Oznacza to, że kiedy strona internetowa jest ładowana na początku, strona internetowa jest pusta jako całość. Tymczasem, po 3 sekundach przejścia, ciało HTML jest widoczne. Ta właściwość odbywa się poprzez wartość przejścia stylizacji CSS, krycie przejścia jest ustawione jako 3s.
Korzystając z tych właściwości, cała zawartość w ciele (tekst lub dowolny obraz) będzie miało zerową krycie. Ale po określonym czasie cała zawartość będzie widoczna.
Kod CSS:
Kierując się w kierunku sekcji ciała znaczników HTML, zastosowaliśmy efekt obciążenia. Lub krycie ciała jest ustawione jako 1, po wyblakłym efekcie.
< body onload = "document.body.style.opacity = '1'">Następnie kolor tła ciała jest ustawiony na czarny. Nagłówek
Nazwa jest zadeklarowana. Dodaliśmy styl inline w znaczniku, dodając białą właściwość czcionki do nagłówka. Następnie zamknij metkę nagłówka.
Kod nadwozia HTML:
Podobnie prosty tekst z odważnym Funkcja jest dodawana i ta sama właściwość czcionki jest dodawana do odważnego tekstu za pośrednictwem wbudowanego CSS.
< p style = "color: white" >Ostatecznie ostatnią zawartością dodawaną do ciała jest akapit
Posiadanie stylizacji. Zamknij wszystkie znaczniki i zapisz plik tekstowy z rozszerzeniem.html 'jako nazwa użytego pliku tekstowego jest próbka.html. Celem tego rozszerzenia jest otwarcie tego pliku w notatniku i przeglądarce. Natomiast '.Rozszerzenie txt 'otworzy cały tekst, gdy zostanie uruchomiony w przeglądarce. Ale kiedy otworzymy plik w przeglądarce z rozszerzeniem HTML, utworzy stronę internetową zgodnie z zawartością HTML.
Dołączyliśmy niewielką część filmu, która pokazuje efekt zniknięcia przejścia na wykonywanie pliku.
Wyjście:
Video gracze.com/WP-content/uploads/2022/06/css-fade-in-cransition.MP400: 0000: 0000: 10 Zastosuj klawisze strzałek w górę/w dół, aby zwiększyć lub zmniejszyć objętość.
Gdy strona zostanie załadowana przy otwarciu pliku na przeglądarce, zobaczysz, że na początku ciało nie jest pokazane, ale po 3 sekundach zawartość utworzona w ciele jest wyświetlana razem. Za każdym razem, gdy przeładowujemy stronę, wszystkie części ciała są odświeżane. Początkowo są one wyblakłe, ale następnie tekst jest wyświetlany, gdy okres wymieniony w CSS jest przekazywany. Użyliśmy klawisza „F5”, aby ponownie załadować stronę.
Możemy również zmienić czas, o którym wspominaliśmy zgodnie z naszym pragnieniem. Podobnie wszystkie efekty zanikania można zastosować tylko do dowolnej konkretnej części zawartości HTML zamiast stosowania do całego ciała. Dzięki temu możesz skupić się bezpośrednio na określonej części strony internetowej.
Wniosek:
CSS FADE w artykule przejściowym polega na zanikaniu właściwości przejściowej i wyświetlania danych HTML. Wprowadziliśmy podstawowe zastosowanie języków HTML i CSS i ich typów. Dystrybucja tagów i cel obu języków są opracowane. Następnie omówiliśmy właściwość przejściową związaną z efektem krycia w stylizacji właściwości CC. W części ciała używana jest prosta funkcja tekstu. Całe ciało jest stosowane z efektem przejściowym.