10 CSS библиотеки за ефекти за по-добро изображение

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

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

В тази компилация има повече от 250 ефекта на навиване да ви вдъхновя. Можете също да вземете кода при източника.

Ефекти върху изображението (16 ефекта)

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

Анимация за надпис надпис на изображението (4 ефекта)

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

iHover (35 ефекта)

iHover е колекция от ефекти с hover, задвижвани от CSS3. Има 20 ефекта на кръговото навиване и 15 квадратни ефекта. За да използвате ефектите, ще трябва да напишете HTML код и да включите CSS файловете.

Image Hover (44 ефекта)

Тази библиотека съдържа 44 ефекта, направени с чист CSS. Някои от ефектите включват избледняване, бутане, слайдове, панти, разкривания, мащаби, размазване, обръщане, сгъване и капаци, в много посоки. Има разширена версия на 216 ефекта, които могат да бъдат закупени за € 14.

Идеи за ефект на навъртане (30 ефекта)

Тази демонстрация на изображението, направена от Codrop, ви дава вдъхновение, когато правите плавни преходи между изображения и надписи. Има общо 30 ефекта върху два комплекта с уроци и изходния код.

Показва CSS (108 ефекта)

Показва CSS ви позволява да добавяте ефекти на навъртане към всеки елемент, като например бутон, връзка или изображение. Ефектите включват 2D преходи, фонови преходи, граници, Shadow и Glow преходи и др. Библиотеката е достъпна в CSS, Sass и LESS.

Animatism (100+ ефекта)

Има повече от 100 анимации за изобразяване на бутони, надписи, детайли, надписи, изображения и бутони за социални медии. Всички ефекти се захранват от CSS3.

Ефект на надпис (7 ефекта)

Има 7 различни ефекта в тази колекция. Всички преходи изглеждат много приятно и гладко. Отидете в раздела за уроци, за да научите как да приложите тези ефекти върху проекта си.

Ефекти на CSS изображение (15 ефекта)

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

3D насочващ ефект

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

Анимация на мишката

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

Плочки с анимирано завиване

Един за дизайн на плочки, този се характеризира с бавно увеличение, слайдове, поп-ин, затъмнено покритие и др.

Ефект на SVG клип-път

Супер страхотно рентгеново прожекторно изображение, което се захранва от SVG Клип-пътека и CSS преходи. Работи добре в Chrome, Opera и Safari.