Ние правим в красив дизайн CSS връзките, когато задържите

Красиви ефекти на връзки към CSS

В HTML, за тези експерименти, аз само трябва да се свържете с лист със стилове, да зададете кодирани и да поставите връзка. Цялата работа се извършва чрез CSS. Демонстрация на ефектите можете да видите, като отидете на тази страница

Бавно прибиращ долна черта

Това е първият ефект, който ще ви покажа.

Самият ефект се осъществява с помощта на селектора "на: висене". Това псевдо който се прилага към елементите, когато мишката курсора на мишката. След това определя рамката отдолу, с дебелина от 5 пиксела, лилаво.

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

Дърпа долния подчертаването

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

Базов за референтни стилове са определени по същия начин, както в предишния пример. След това трябва да се създаде псевдо-елемент. Това ще бъде нашата подчертаване. Задава цвят, ширина и височина. Посочете съдържание имот и не забравяйте да се посочи, че псевдо показва правилно.

На следващо място, трябва да се регистрирате забавяне (написах 1.2 секунди), сложи непрозрачността на 0, елементът не се вижда в липсата на указания относно връзката. Последното нещо, което ние ще направим - чрез преобразуване преместите елемента по 30 пиксела.

За реализиране на ефекта, а сега само трябва да промените непрозрачността до 1 (напълно непрозрачен елемент) и да се върнете стоката в първоначалното му положение. По този начин, в резултат на това забавяне, промяна в имоти се случва плавно и ще видите как постепенно се премества към подчертаване на връзката.

Smooth разширяване на правата връзка

Основни стилове от една връзка не се променят. Номинация може да се направи повече, ако желаете.

увеличение Връзките

Увеличаването на продължителността на връзката

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

Бавният появата на цвета на фона

Също така е много лесно да се реализира:

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

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

Можете също така да се интересуват от

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

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

Здравейте. Много дълго време не пиша мнения по темата за работа HTML / CSS. Напоследък просто започна

Всички добре дошли. Днес, аз ще напиша една много интересна статия за това как да се направи в CSS

Поздравявам ви. Изглежда, на страниците на блога си, не съм описано как да се направи