Анимиране на CSS и нейните функции

Ако попитате как да направите анимация с CSS, много потребители отиват да намерят уроци и инструкции. И въпреки че ще намерите подобни инструкции тук, наред с други неща, ще ви дадем основните полезни съвети за създаване на анимация, използвайки CSS.

Тайната на идеалния дизайн

Основният съвет, който може да се даде на тези, които искат да се научат напълно, каква е гладката анимация на CSS, е това. С ежедневните експерименти с готови парчета код, опитайте се да проведете собствени експерименти. Във време, свободно от работа на собствените си сайтове, опитайте се да видите какво се случва, когато сгъвате парче код, за да изучите напълно имот. Опитайте се да внедрите всякакви интересни идеи, като използвате напълно различни езикови инструменти, а анимацията CSS ще се отвори за вас от новата страна. Този прост съвет е следният - експериментирайте сами.

CSS анимация на външния вид

И сега нека да преминем към интересни примери. Обикновено стандартното използване на анимацията е да се променят плавно някои елементи от сайта. Но това е прекалено сладко, не мислиш ли? Ето защо тук ще споделим с вас един необикновен начин за използване на външния вид на анимацията.

Фактът е, че действителните промени в сайта в парче анимация или в пълната му форма могат да бъдат почти мигновени. За тази цел възлагаме две ключови кадри, но използваме много малък интервал. Например, тя може да бъде равна на 0.001%. В този случай анимацията на CSS може да се случи незабавно. Това е идеално за имитиране на всякакви неонови знаци. Този знак ще мига и ако анимацията на CSS все още използва прозрачност и собственост на текст-сянка, знакът ще е почти като истински.

Ето примерният код.

Подобряване на функционалността на бутоните

Ако разгледаме въпроса колко необичайно е анимацията на един бутон на CSS, можем да кажем, че има много опции за декориране на бутоните на уеб сайтове. Нека разгледаме един пример. Ефектът на натиснатия изпъкнал бутон. Примерният код е по-долу.

С това просто парче код, CSS блок анимация ще изглежда доста добре. Изглежда много интересно и често се използва на перфектни различни сайтове.

CSS-анимация, когато се движите над фрагмента на сайта

Колкото по-динамичен и модерен е сайтът, толкова по-дълго потребителят остава на него. В допълнение, интерактивността също играе важна роля. Разбира се, това е вярно, но какво може да помогне на сайта да стане възможно най-интерактивен?

Много добра работа изглежда с дизайна на елементи и фрагменти от сайта, когато задържате мишката. Анимирането на бутоните, когато се движите, се разглобяваме по-горе, но освен това можете да "съживите" и всякакви части от сайта, като ги направите колкото е възможно по-стилен. Както при всичко останало, основният принцип тук не е да го прекалявате.

Така че има отлична собственост на прехода, която може да отнеме до четири свързани имота.

В определено време CSS-анимацията, когато задържите курсора на мишката върху този код, ще се промени. Времето се определя от собствеността на продължителността. Тоест, когато зависите над даден елемент, той започва да променя по особен начин някои свойства, които попитахме в селектора. За нашия случай това е. Елемент (точка напред). По-долу е даден пример за код, който при превключване от контейнер div, който има псевдо-клас, фоновете се променят от червено на зелено.

Когато задържите курсора на мишката на потребителя, анимацията на CSS не се променя веднага, но със закъснение за малко от секундата, което създава интересен ефект.

Освен това, ако в предходния пример сте задали правило, че фонът за елемента div трябва да се промени от червено и да премине в зелено за 0.4 секунди, трябва да вземете под внимание, че като използвате стойността всичко, можете да се обърнете към целия имот като цяло веднага.

Примерният код е както следва.

Както е показано, подложката и свойствата на фона ще имат преходен ефект, който се определя от собствеността на прехода. Трябва да отбележите, че можете да зададете определен набор от стойности, разделени със запетаи.

Няколко нюанса на използването на този тип анимация върху бутоните

По принцип, като цяло, не е толкова важно в какъв ред ще бъдат посочени и изброени тези стойности. С изключение на един случай. Можем да се справим със собствеността със забавяне. В този случай трябва да посочим продължителността на времето. С други думи, в кода ще трябва да предоставим колко дълго ще се случи забавянето, което ни трябва.

Не забравяйте обаче, че някои свойства не могат да имат ефекта на прехода. Това означава, че те не могат да бъдат преходни. Това се дължи на факта, че те вече не могат да бъдат анимирани.

Текст анимация

С помощта на код може да се настрои и отлична анимация на текста на CSS. Това може да е някаква статия и основно заглавие, заглавието на сайта. Както вече споменахме по-горе, основното нещо тук не е да прекалявате и да не превърнете сайта си в сметище, което ще изглежда евтино.

Е, нека се опитаме да разберем каква е анимацията на CSS текста и да го създадем и текстови сенки. Вероятно сте виждали филми на ужасите, в които имената на самите картини сякаш избледняват на мрачен мрачен фон. Нека се опитаме да пресъздадем нещо подобно в общия пример.

Анимирайте текст в стила на филмите на ужасите

Всъщност, самата идея е да се направи текст, в който буквите да бъдат леко замъглени и да се въртят. Трябва да има интервал между буквите. Ще използваме сянка между букви, както и интервал. За да приложим идеята, се нуждаем от писмо от Lettering.js от Дейв Рупърт. Необходимо е да обвиете думи и букви в няколко маркера. Първо, трябва да обвиете фрази в маркера h2. Ето примерният код.

След това обвийте всички думи в h2 таговете в маркера за разделяне.

Това ще се случи по този начин.

Тя ще изглежда малко тромава, но не се притеснявайте от нея.

Вземи доста луда структура.

В резултат на това ние обвиваме всяка от буквите, които имаме в маркера "Span". Те наистина се оказаха много. Но в кода по-горе, примерът е доста опростен. Можете сами да напишете цялата структура и тя ще бъде малко по-голяма. Зависи и от кой текст ще използвате.

Завършете работата си с малко стилизиране. Всичките ни заглавия в горния пример ще бъдат разположени в цялата ширина на екрана. И те ще заемат почти цялото свободно пространство.

Тъй като ще поставим всички наши букви в центъра на екрана, за нашия контейнер имаме нужда от гъвкава кутия.

Нека да дадем пример за неговия код.

Сега сме направили така, че всички букви, които са увити в класа на span, който принадлежи към фразата клас родител, ще бъдат разположени и ще бъдат фиксирани точно в центъра.

Не забравяйте да добавите малко свободно място, тоест интервалът между буквите.

В този случай първата обвивка ще има определена допълнителна собственост. Този имот е перспективен. Това ще ни позволи да направим така, че този раздел да се изпъкне, да излезе на преден план.

Същите същите букви ще бъдат прозрачни и ние ще пуснем интервала за анимация някъде за 5,2 секунди. По-долу е даден пример за код.

Също така е важно да се определи как и с какво забавяне ще се появят нашите предложения и фрази. Коя част от текста ще се появи по-бързо от предишния и колко. Кодът ще изглежда така.

Ние ще дадем малък, но много любопитен ефект. Задайте непрозрачността до 0,2. Разстоянието между буквите ще е доста голямо. Буквите също ще бъдат леко завъртени по оста Y. Вие и потребителите на вашия сайт ще видите само малка част от тези букви. Също така не забравяйте да приложите свойството на текст-сянка. Половината анимация ще направим нещо необичайно. Ще наточим самите букви, а също така ще намалим разстоянието, което се намира между тях, след това ще увеличим непрозрачността, след което ще завъртим знаците на 0 по оста Y.

В крайна сметка ще добавим отново изчезващите букви и малко ще ги мащабираме. Това отново ще даде малък ефект на размазване.

И накрая последната фраза на CSS-анимация.

И да, накрая добавете окончателното докосване. Ще се съсредоточим върху някои конкретни думи. Те ще имат дебел маркер. Това ще даде необходимия акцент.

Не забравяйте източниците на вдъхновение

Когато се опитвате да експериментирате с CSS свойства и анимации, опитайте се да намерите вдъхновение във всичко в ежедневието. Това може да бъде всичко, от интересна уеб страница до чудесен видео ефект.

Освен това, ако не огледате как се прави този или онзи ефект, и се опитайте да го пресъздадете сами, можете да постигнете добри резултати. Или поне винаги научете повече за възможностите на програмния език, който всъщност използвате. Дори идеята, че не сте изпълнили напълно, може много добре да бъде много ефективна.