Bezpłatna biblioteka CSS do tworzenia niestandardowych animacji obrazowania

Udostępnij w sieciach społecznościowych:

Izmir jest darmowa biblioteka CSS do tworzenia niestandardowych animacji najechania kursorem. Tutaj ma 9 różnych animacji, dzięki którym z łatwością możesz eonować swoje witryny. Musisz tylko dodać prosty fragment kodu HTML, jak wspomniano w dokumentach, a następnie gotowe. To biblioteka typu open source i nie musisz być ekspertem od HTML i CSS, aby z niej korzystać. Nie musisz nawet pisać kodu od zera, aby dodać te niesamowite efekty do zdjęć. Wystarczy proste operacje kopiuj-wklej.

Na razie Izmir ma 9 efektów animacji i możesz z nich korzystać bezpłatnie. Wystarczy dołączyć główny arkusz stylów i użyć prostego znacznika, aby dodać pożądany efekt do obrazu. Aby jednak szybko z niego korzystać w witrynie lub projektach, powinieneś mieć podstawową wiedzę na temat języka HTML, zwłaszcza na temat prostego znacznika obrazu. Możesz umieścić zdjęcia w dowolnym miejscu na swojej stronie, a to bardzo miłe narzędzie do galerii zdjęć. Możesz dodać podpisy obrazów w efekcie najechania kursorem, aby wyglądały interaktywnie. Jest to również dobra opcja dla blogów turystycznych i internetowych dzienników turystycznych.

Bezpłatna biblioteka CSS do tworzenia niestandardowych animacji obrazowania

Jak korzystać z tej bezpłatnej biblioteki CSS, aby tworzyć niestandardowe animacje najechania obrazkiem?

Rozpoczęcie pracy z tym arkuszem stylów jest bardzo proste. Na razie ma 9 efektów graficznych i 12 efektów animacji tekstu. Możesz wypróbować te efekty na stronie demonstracyjnej tej biblioteki. Możesz zobaczyć, który ci się podoba, a następnie odpowiednio użyć tego efektu. Pierwszą rzeczą, którą musisz zrobić, to pobrać arkusz stylów „izmir.min.css” na komputer, a następnie po prostu rozpocząć tworzenie znaczników na tej podstawie.

 rel="stylesheet" target="_blank" href="css/izmir.min.css"> 

Izmir dodaje do głowy

Przykładowy znacznik do stworzenia efektu obrazu znajduje się poniżej. Tutaj musisz użyć tego formatu na swojej stronie, a następnie możesz zobaczyć animację w akcji. Poniższy kod doda prosty przykładowy efekt animacji pobrany z Unsplash. Po najechaniu kursorem na ten obraz zostanie wyświetlony tekst zdefiniowany w znaczniku HT.

 class="c4-izmir">    src="https://source.unsplash.com/FaPxZ88yZrw/400x300" alt="Sample Image">   

Some sample text

Izmir w akcji

W ten sposób możesz skorzystać z tej prostej biblioteki i dodać naprawdę niesamowite efekty najechania obrazkiem na obrazy witryny i dostosowywać je w dowolnym momencie. Obecnie jest ich mniej niż 10 efektów, ale mam nadzieję, że będzie ich więcej, ponieważ jest to projekt typu open source i ciągle rozwijany.

Końcowe przemyślenia

Chodzi o tę prostą bibliotekę CSS, aby z łatwością dodawać animowane efekty do zdjęć. Wystarczy pobrać go z GitHub za pomocą linku podanego powyżej, a następnie dodać go w kodzie HTML swojej witryny. Następnie możesz go użyć, dodając wspomniany znacznik HTML. Ten post pomoże ci. Teraz możesz po prostu zobaczyć dokumenty, a następnie zacząć z niego korzystać już teraz.

Komentarze Facebook
Zobacz:   Aplikacja AR firmy Adobe na iPhone'a do tworzenia interaktywnych projektów 3D za darmo