Анимация за подчертаване на препратките на чист CSS

6
1241

Превод. Оригиналът е на Дани Гуо: Animated Multiline Link Underlines with CSS


Едно от предимствата, че създавам своя личен уебсайт от нулата, вместо да използван готова тема, е в това, че започвам с настройките на браузъра по подразбиране, след което постепенно добавям своите елементи. Старая се сайтът да не са раздува, но от друга страна, персонализацията е важна. Трябва да се намери някакъв компромис между спартанските страници на Hacker News и Craigslist от една страна, и от друга – с претоварения предишен MySpace.

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

Ето как изглежда самият ефект:

Реализацията

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

Започнах с прилагането на два подхода. И двата премахват стандартния text-decoration и с помощта на псевдоелементи добавят имитация на граница. След това тази граница се анимира чрез CSS преходи. Но тези решения имат сериозен недостатък: те не работят нормално, ако линкът заема повече от един ред. Подчертава се само първия ред:

Накрая открих CodePen на Shaw, който няма подобен недостатък и промених ефектите, както на мен ми допада:

Ето го и сорс кода. Всеки може да си поиграе с него на repl.it.

a {
     text-decoration: none;
     background-image: linear-gradient(currentColor, currentColor);
     background-position: 0% 100%;
     background-repeat: no-repeat;
     background-size: 0% 2px;
     transition: background-size .3s;
}

a:hover {
     background-size: 100% 2px;
}

 

Да се спрем по-подробно на това решение.

Първо, изключваме свойството text-decoration.

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

Използваме background-position за поставяне на изображението в долния ляв ъгъл. Тук значението 0% съответства на хоризонтално положение, а 100% – на вертикално.

Изключваме background-repeat, за да предотвратим създаването на няколко екземпляра на изображението.

С помощта на background-size указваме нулева ширина и височина два пиксела. Нулевата широчина означава, че подчертаването ще се появи точно, когато курсорът попадне върху линка. В противен случай, нищо не трябва да се вижда.

Избираме transition според размера на фона по такъв начин, че всяка промяна в свойството да отнеме 0,3 секунди.

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

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

6
ДОБАВИ КОМЕНТАР

avatar
3 Коментари
3 Отговори на коментарите
5 Последователи
 
Коментарът с най-много реакции
Най-горещият коментар
  Абонирай се  
нови стари оценка
Извести ме за
Палустинец
Палустинец

Какви са тези простотии !
Отврат !!!

никой
никой

Нещо което няма да разбереш.

AI is the future
AI is the future

Кода работи перфектно. Ефекта ме радва 🙂 Палустинеца явно няма идея от програмиране и не знае какво да прави с предоставения код… не му обръщайте внимание.

pix3l
pix3l

А то тва е едно програмиране… едно ниво над тея, дето много разбират и могат да инсталират Windows. 😀

AI is the future
AI is the future

Нямам идея защо се заяждаш. И не знам откъде си паднал, ама ако не си разбрал – интернета движи света. А това тук е част от WEB програмирането – езика се казва CSS и се използва за стилизиране на буквално всяко едно нещо, което виждаш във всеки един сайт… от големината на буквите до това кой елемент къде точно да се намира.. Windows-a се инсталира с next next finish от 20 години насам и ако все още има някой, който не го умее е голяма срамота 😀

Лентяя
Лентяя

Една малка поправка само.След „transition:0.3s; “ без background-size.Не е лош ефекта.Ако го харесат клиенти, бих го използвал в някои проектчета.