CSS трансформиращи ефекти (CSShake)
Когато се появят нови свойства в CSS каскадната таблица, най-често въз основа на техните възможности ентусиастите създават библиотеки, които включват цели набори от ефекти. Така беше и с CSS филтрите за изображения, CSS анимациите и други интересни функции.
И днес ще разгледаме CSS "плъгина" CSShake, с който можете да направите забавен анимиран ефект от треперещи елементи. Основният компонент е свойството transform, което работи заедно с animation.
Пример за бийт ефект)
Това е просто шега, а не крайният резултат. Всъщност има избор от ефекти, както леко разклащане, така и много голямо или дори ръчно регулиране. Също така изборът на посока: хоризонтална, вертикална, кръгова и др. Прочетете повече по-долу)
Свързване на CSShake и използването му на сайта
Всичко е много просто, особено като се има предвид, че плъгинът CSShake се реализира само с помощта на CSS. Следователно са необходими стилове, за да работят и да се уточнят определени класове за елементи, които трябва да бъдат разклатени по не детски начин)
Връзка
Грубо казано, библиотеката е свързана по три начина, но преди всичко ще поясня, че не е необходимо да интегрирате пълния набор от ефекти, в случай че имате нужда само от един от тях. Тъй като специално за този случай, всички ефекти са разделени в отделни CSS файлове.
1ви. Изтеглете най-новата версия на приставката от официалния сайт (тук). Качете го на вашия сайт и го свържете към ресурса между таговете.
2-ро. Използвайте мрежа за доставка (CDN), което прави нещата много по-лесни.
3-ти. Третата опция всъщност са отделни стилови файлове. Те могат да бъдат свързани чрез CDN (тук е целият списък) или просто копирайте целия код и го поставете във вашия стилов файл на сайта.
Използвайте
След като свържете библиотеката CSShake, която и да е от трите опции по-горе, трябва да зададете определени класове на желания елемент на сайта. Има три основни класа:
1-во разклащане-хоризонтално - всеки ефект на разклащане 2-ро. shake-constant - стартиране без прекъсване на анимацията 3-то. shake-constant--hover - спиране на анимацията при задържане на курсора на мишката върху елемент