CSS ефект при задържане на курсора на мишката върху изображение. Създаваме оригинални ефекти при задържане на курсора на мишката с помощта на допълнителен CSS3 Ефектът на различни фонове в html

| 18.02.2016

CSS3 отваря неограничени възможности за UI дизайнерите, като основното предимство е, че практически всяка идея може лесно да бъде реализирана и приложена в реалния живот, без да се налага да прибягвате до JavaScript.

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

За по-подробна информация можете да изтеглите архивите на файловете.

Всички ефекти работят с помощта на преход на мощност. преход- „Преход“, „пресъздаване“) и псевдокласа: hover, който показва стила на елемента, когато мишката е поставена върху нов курсор (в нашия асистент). За нашите приложения използвахме div блок с размери 500x309 пиксела, изходният фонов цвят беше #6d6d6d и преходът от един етап към друг отне 0,3 секунди.

Тяло > div (ширина: 500px; височина: 309px; фон: #6d6d6d; -webkit-transition: всички 0.3s лекота; -moz-transition: всички 0.3s лекота;; -o-transition: всички 0.3s лекота; преход : всички 0,3 секунди лекота )

1. Променете цвета, като задържите курсора

Ако прилагането на такъв ефект ще изисква много работа с математически изчисления на RGB стойностите на песента. Сега трябва да напишете CSS стил, в който трябва да добавите псевдо-class:hover към селектора и да зададете цвят на фона, който плавно (за 0,3 секунди) ще замени изходния цвят с фона, когато задържите курсора върху блок:

Цвят: задържане на курсора (фон:#53ea93; )

2. Външен вид на рамката

Най-очевидната трансформация е вътрешната рамка, която плавно се появява при задържане на курсора на мишката. Добър за по-удобни различни бутони. За да постигнете този ефект, използвайте следния псевдоклас: hover и силата на box-shadow с вмъкнатия параметър (задава сянката на средата на елемента). Освен това трябва да зададете засенчването (в нашата сянка 23px) на същия цвят:

Border:hover (кутия-сянка: вмъкване 0 0 0 23px #53ea93; )

3. Люлка

Дадена е CSS анимацията - вина, защото тук не се използва силата на прехода. Вместо това бяхме трогнати от:

@keyframes - основната директива за създаване на CSS анимация кадър по кадър, която ви позволява да работите т.н. разкадровка и опишете анимацията със списък от ключови точки;
animation и animation-iteration-count - мощност за задаване на параметри на анимация (сладост и плавност) и брой цикли (повторения). Понякога повтаряйте 1.

@-webkit-keyframes swing ( 15% ( -webkit-transform: translateX(9px); transform: translateX(9px); ) 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform: translateX(6px); ) 50% ( -webkit-transform: translateX(-6px); transform: translateX(-6px); ) 65% ( -webkit -transform: translateX(3px); transform: translateX(3px) 100% ( -webkit-transform: translateX(0); transform: translateX(0); ) ) @keyframes swing (15% ( -webkit-transform: 30% ( -webkit-transform: translateX(-9px); transform: translateX(-9px); ) 40% ( -webkit-transform: translateX(6px); transform : translateX(6px); ) 50% ( -webkit- transform: translateX(-6px); transform: translateX(-6px); 65% (-webkit-transform: translateX(3px); transform: translateX(3px); 100% (-webkit-transform: translateX(0) translateX(0); .swing:hover (-webkit-animation: swing 0.6s ease; animation: swing 0.6s ease; -webkit-iteration-count: 1; animation-iteration-count: 1; )

4. Згасаня

Ефектът на плавното изчезване е по същество нормална промяна в яснотата на елемента. Анимацията се създава на два етапа: необходимо е да зададете кочана на ниво на видимост 1 - тогава няма да има видимост, след което въведете тези стойности при задържане на мишката - 0,6:

Избледняване (непрозрачност: 1;) .fade:hover (непрозрачност: 0,6;)

За най-добър резултат променете стойностите на места:

5. Збилшеня

За да направим блока по-голям при задържане на курсора, бързо използваме трансформация и задаваме стойността на scale(1.2). В този случай блокът ще се увеличи с 20 стотни части, като запази пропорциите си:

Grow:hover (-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )

6. Промяна

Промяната на елемент е толкова проста, колкото и увеличаването му. Тъй като в петия параграф, за да увеличим мащаба, трябваше да въведем стойност, по-голяма от 1, тогава, за да променим блока, просто въвеждаме стойност, която е по-малка от единица, например мащаб (0,7). Сега, когато курсорът на мишката се задържи, блокът ще се промени пропорционално с 30 стотни от размера си:

Shrink:hover (-webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )

7. Трансформация в кол

Една от най-популярните анимации е елемент с права линия, който при задържане на курсора се трансформира в кръг. За допълнителната мощност на CSS border-radius, vikorista в сравнение с: hover и преход, това може да се приложи без проблеми:

Circle:hover ( border-radius: 70%; )

8. Обертаня

Практичен вариант на анимацията е да завъртите елемента с няколко градуса. За целта отново се нуждаем от силата на трансформация, а също и с други стойности - rotateZ(20deg). С тези параметри блокът ще бъде завъртян на 20 градуса зад стрелката на годината по оста Z:

Завъртане: курсор (-webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); )

9. 3D сянка

Идеите на дизайнерите се различават за точния ефект на плоския дизайн. Не по-малко, тази CSS3 анимация е много оригинална и също е популярна в уеб страниците. Постигнете тривиален ефект, като използвате вече познатите сили на box-shadow (за създаване на богата сянка) и трансформирайте с параметъра translateX(-7px) (за да сте сигурни, че блокът е преместен хоризонтално наляво със 7 пиксела):

Threed: hover (box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: translateX( -7px); transform: translateX(- 7px);

Поддръжка на браузър

От днес преходът на мощност се поддържа от следните браузъри:

Десктоп браузъри
Internet Explorer	Поддържа се от IE 10 и по-нова версия
Chrome	Поддържа се с версия 26 (до версия 25 се поддържа с префикса -webkit-)
Firefox	Поддържа се с версия 16 (версии 4-15 използват префикса -moz-)
Опера	Поддържа се с версия 12.1
Safari	Поддържа се с версия 6.1 (версии 3.1-6 използват префикса -webkit-)

Други функции и вариации в тези приложения, като transform, box-shadow и т.н., също се поддържат от повечето текущи браузъри. Въпреки това, ако възнамерявате да използвате тези идеи за вашите проекти, ние силно препоръчваме да проверите отново функционалността си за кръстосани браузъри.

Сигурни сме, че ще намерите тези CSS3 анимационни приложения за полезни. Желаем ви творчески успех!

Hover-effects – завършване на темата за учене. Дори внедряването им може да направи вашия сайт по-динамичен и оживен. Днес ще разгледаме някои ефекти за работа с изображения. Същото важи и за HTML и CSS кодовете, които можете да научите от играта.

Zbilshennya

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

ос HTML-код:

"http://lorempixel.com/400/400/people/9" alt="портрет" > !}!}

Моля, обърнете внимание, че изображението, като това в изображението, е с размери 400px на 400px. Сега нека се чудим CSS.

/*GROW*/ .grow img (височина: 300px; ширина: 300px; -webkit-transition: all 1s лекота; -moz-transition: all 1s лекота; -o-transition: all 1s лекота; -ms-transition: 1s лекота; преход: всички 1s лекота;

Първоначално задаваме размера на изображението на зоологическата градина на 300px, а след това, когато потребителят задържи курсора на мишката над него, той се увеличава до 400px. Имаме преливане – скрито, което ни позволява да премахнем ефекта на мащабиране.

Stisnennya

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

"http://lorempixel.com/400/400/nightlife/4" alt="град" > !}!}

/*SHRINK*/ .shrink img (височина: 400px; ширина: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -all-trans 1s ease ; преход: всички 1s ease;

Странична панорама

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

"http://lorempixel.com/600/300/sports/8" alt="ритник" > !}!}

Тук използваме изображение на vikory с ширина 600px и височина само 300px - променяме хоризонталната позиция на снимката и не е необходимо да замразяваме ефектите до височината.

/*SIDEPAN*/ .sidepan img ( margin-left : 0px ; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; -ms-transition: margin 1s ease преход: margin 1s лекота; .sidepan img:hover ( margin-left : -200px ; )

За да създадем ефекта на панорамиране, ние не променяме размера на изображението, както направихме миналия път, но вместо това, използвайки същото поле, ще поставим изображението отляво. Ако искате изображението да се движи надясно, изберете margin-right.

Вертикална панорама

За да предадем ефекта на roc, нека повторим този ефект още веднъж - това също е подходящо за създаване на вертикално панорамиране.

"http://lorempixel.com/300/600/sports/5" alt = "изкачване" > !}!}

/*VERTPAN*/ .vertpan img ( margin-top : 0px ; -webkit-transition: margin 1s ease; -moz-transition: margin 1s ease; -o-transition: margin 1s ease; conversion: margin 1s ease; ) . vertpan img:hover ( margin-top : -200px ; )

Кодът е практически същият като миналия път, само че сега заместваме margin-left с margin-top.

Трансформация

Незабавните ефекти са динамични.

Нахил

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

"http://lorempixel.com/300/300/transport/5" alt="кола" > !}!}

/*TILT*/ .tilt ( -webkit-transition: всички 0.5s лекота; -moz-transition: всички 0.5s лекота; -o-transition: всички 0.5s лекота; -ms-transition: всички 0.5s ese; преход: всички 0.5s лекота;) .tilt :hover (-webkit-transform: rotate(-10deg) ; ms-трансформация: завъртане (-10 градуса); трансформиране: завъртане (-10 градуса);

Както можете да видите, всичко, от което се нуждаем, е да завъртим изображението с десет градуса. Толкова е ефективен!

Закръгляване на разрези

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

"http://lorempixel.com/300/300/nature/5" alt="плаж" > !}!}

/*MORPH*/ .morph ( -webkit-transition: всички 0 .5s лекота; -moz-transition: всички 0 .5s лекота; -o-transition: всички 0 .5s лекота; -ms-transition: всички 0 .5s лекота; преход: всички 0.5s лекота) .morph :hover (border-radius: 50 % ; -webkit-трансформация: завъртане (360 градуса); -Moz-трансформация: завъртане (360 градуса); -o-трансформиране: завъртане (360 градуса); -ms-трансформация: завъртане (360 градуса); трансформиране: завъртане (360 градуса); )

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

Фокус

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

"http://lorempixel.com/300/300/sports/1" alt="крикет" > !}!}

/*FOCUS*/ .focus ( -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; conversion: all 1s ease; ) .focus :hover (рамка : 70px solid # 000 ; радиус на границата: 50 % ; }

Взехме границата 10px и променихме черната граница със 70px и увеличихме радиуса до 50%, което направихме в предния край.

Филтър Webkit

За да се осигури максимална функционалност на браузъра, такива приложения няма да използват префикса WebKit. Тези данни вече не са налични в Safari и Chrome. Независимо от ограниченията, филтрите на Webkit ви позволяват да променяте действията, за да постигнете невероятни ефекти! Демонстрация

Росмитя

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

Първо, за тези, които все още не са съвсем в темата или изобщо не са в темата, ще обясня накратко какво е hover. Различни видове ефекти (надписи, подсказки, плавни преходи, трансформация, завъртане, подобряване, изместване и т.н.) могат да бъдат приложени към елементи на уебсайта с курсора на мишката върху тях. Те могат да бъдат реализирани или с помощта на различни jQuery добавки, или в чиста форма.
Днес подготвях голяма колекция от оригинални ефекти на курсора на мишката за изображения, създадени с помощта на CSS3, без свързване на javascript библиотеки. Няма да говоря за предимствата и недостатъците на внедряването на ефекти при задържане върху чист CSS3, това е друга тема, просто ще разгледам примерите и ако е необходимо, ще използвам приликите на вашия сайт. Всички ефекти са представени с един поглед, включително демонстрационен приклад и отчетна документация с изходни устройства. Ръководствата са повече или по-малко буржоазни, но всичко се разбира повече или по-малко интуитивно.

Бих искал да изразя вашето уважение към факта, че всички тези приложения работят правилно само в настоящите браузъри, които поддържат силата на CSS3.

За да не се разваля скритата картина, без да се усуква от машинен превод на имената на ефектите (за всякакви цели), лишавайки оригиналите от заглавията, както ги е нарекъл издателят.

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

iHover има удивителна колекция от ефекти, когато се задържи върху чист CSS3, с помощта на Bootstrap 3. Вдъхновен от Scss CSS (файл), лесно модифициран. Модулен код, няма нужда да включвате целия файл в работата. 30+ различни ефекта в един пакет. Всичко е добре документирано, ефектите са още по-прости във Vikoristan. Всичко, което трябва да направите, е да направите правилното HTML оформление и да включите CSS файла, преди да започнете работа.

Създава редица прости, но стилни ефекти, в зависимост от часа на подписа на изображението. Идеята е, че когато задържите курсора на мишката върху миниатюрата, заглавието, името на автора и бутонът за връзка ще се появят ефективно. За определени ефекти се използват визуални 3D трансформации.

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

за миниатюри с помощта на CSS3

Търговецът на дребно позиционира работата си като галерия с задници, за да изобрази ефектите от преходите от изскачащи анотации (надписи) към миниатюри. Посочва се, че ще се поддържа от настоящите браузъри, включително IE 9+. Пълноценна галерия, разбира се, е трудно да се нарече, но ефектът от появата на подписи е пълен.

Основен набор от CSS правила за създаване на неблагоприятни ефекти, когато задържите курсора на мишката върху перфектно кръгли миниатюри. Пакетът съдържа 7 вида CSS3 преходи, включително документация от обучение и разработка. Ефектите се поддържат от текущите браузъри.

Обвиване на миниатюри при задържане

Прост ефект на опаковане на кръгли миниатюри, когато курсорът на мишката се задържи върху тях, приблизително същият, който можете да видите в моя блог, в съобщения за записи на главата. Реализира се с няколко реда CSS код.

За дословен превод: „Сексуален ефект, когато се посочи“. Нещо толкова сексуално, в чийто ефект едва ли ще забележите, освен ако нямате развихрено въображение, но ефектът по своему е полезен и увеличава уважението към новия мъж.

Пет различни ефекта, които да се показват, когато ги посочите. Сигнатури в три варианта, завеси с различна степен на видимост и обвиване с хоризонтални движения.

4 Вижте анимационните ефекти на надписите на изображения, реализирани включително с помощта на CSS3. Различните позиции с ефект на преход са напълно стандартни. За да разберете как работи анимацията, погледнете изходния код на демонстрационната страница, без да виждате придружаващата документация.

В мрежата на галерията са добавени миниатюри с различни ефекти като подписи, обвиване, проявяване, сливане и др. Документацията от източника и корекцията е оскъдна, но можете да кандидатствате за специална заявка.

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

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

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

Оригинални ефекти при задържане на курсора на мишката върху CSS3, които се използват за ефективен външен вид на миниатюрни надписи при задържане. Набор от CSS правила съдържа 10 различни ефекта, които могат да бъдат персонализирани за различни изображения. Ефектите наистина влияят, особено когато става въпрос за разбиране на това, което се прави без помощта на CSS3. Подробно ръководство, което ще ви помогне да разберете какво става.

Идеята е да се създаде SVG, който е фонова форма за всяко писане и се трансформира в друга форма, когато мишката се задържи върху нея. По този начин можете да създадете няколко различни опции, а примерът показва три вида ефекти на прехода. Предимството на използването на SVG е, че можем да променим размера на формуляра, за да съответства на размера на оригиналния контейнер.

Розсувни изображения

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

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

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

Надписът преди изображението се появява от ъгъла и се разширява в цялата област на изображението по диагонал.

Има редица други решения за внедряване на подписи преди миниатюри на изображения. В онлайн редактора можете да експериментирате с параметрите и да постигнете желаните резултати.

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

Химеричните форми и ефектът се подобряват поради ефекта на анимацията, когато надписите се появяват преди показването на миниатюрите.

Пример за създаване на визуален ефект на слайд за показване на обемни надписи върху изображения, използвайки само CSS3 и HTML5.

6 надписа към снимки

6 опции за показване на надписи преди изображения при задържане на курсора на мишката върху допълнителен CSS3. Най-полезният урок от внедряването и корекцията на разположение за уикенда.

Е, най-накрая, най-накрая, не мога да не се сетя за най-простия начин за създаване на обединяващ надпис към миниатюрата с помощта на CSS3.

Научих за този метод в един от предишните ми уроци: .

Искате ли да изпратите съобщение до робота на сайта възможно най-скоро? Сега е напълно възможно! Поради тези прости причини се появи нов раздел на пазара TemplateMonster. Колекцията ще бъде актуализирана, но вече можете да разберете какво е подходящо за вашия онлайн проект. Всичко, което трябва да направите, е да изберете вашето идеално готово решение и да работите с представянето на необходимата информация. И не забравяйте, че трябва да напишете текста в шаблона на писмото ръчно.

С уважение Андрий

Първо, за тези, които все още не са съвсем в темата или изобщо не са в темата, ще обясня накратко какво е това. Различни типове ефекти (надписи, подсказки, плавни преходи, трансформация, завъртане, подобряване, изместване и т.н.) могат да бъдат приложени към елементите на уебсайта, когато курсорът на мишката се задържи върху тях. Тези ефекти могат да бъдат реализирани с помощта на различни jQuery добавки или в чист .
Днес подготвях голяма колекция от оригинални ефекти на курсора на мишката за изображения, създадени с помощта на CSS3, без свързване на javascript библиотеки. Няма да говоря за предимствата и недостатъците на внедряването на ефекти при задържане върху чист CSS3, това е друга тема, просто ще разгледам примерите и ако е необходимо, ще използвам приликите на вашия сайт. Всички ефекти са представени с един поглед, включително демонстрационен приклад и отчетна документация с изходни устройства. Ръководствата са повече или по-малко буржоазни, но всичко се разбира повече или по-малко интуитивно.