Блог Хасанова Ильи о сайтостроении
  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты
Блог Хасанова Ильи о сайтостроении
Партнерская компания AIR для каналов видеохостинга youtube
  • База знаний
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Анимированное выделение ссылок при наведении курсора
06 мая2016

Анимированное выделение ссылок при наведении курсора

06 мая 2016. Категория: Магия CSS стилей

Анимированное выделение ссылок при наведении курсора

По умолчанию ссылка выделяется среди прочего текста не совсем привлекательным для глаза темно-синим цветом с простым подчеркиванием. При помощи магии CSS стилей её оформление можно значительно преобразить, добавив анимационный эффект при наведении курсора.

4 примера анимированного выделения ссылки при наведении курсора

Ехал Древнегрека через реку,
Видит Древнегрека - в реке рак.
Сунул руку Древнегрека в реку,
Рак за руку Древнегрека цап!

HTML разметка всех примеров

В первых двух примерах за основу взята обычная анкорная ссылка, ничего более... В третьем и четвертом примерах используется атрибут data-hover, который содержит текст, появляющийся при наведении.

/* Разметка первых двух примеров */
<a href="#">1 и 2 пример</a>
/* Разметка третьего примера */
<a href="#" data-hover="3 пример">3 пример</a>
/* Разметка четвертого примера */
<a href="#"> <span data-hover="4 пример">4 пример</span></a>

CSS стили примера №1

a { line-height: 1; display: inline-block; text-decoration: none; color: #118EC7; }
a:after {
	height: 2px; /* Толщина линии подчеркивания */
	display: block; content: "";
	background-color: #118EC7; /* Цвет линии подчеркивания */
	margin-top: 2px; width: 0;
	transition: width .2s ease-in-out; /* Скорость появления/исчезновения линии */
	}
a:hover:after,
a:focus:after {width: 100%;}

CSS стили примера №2

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

a { display: inline-block; position: relative; text-decoration: none; color: #118EC7;}
a::before {
	display: block; position: absolute; width: 0; content: "";
	height: 2px; /* Толщина левой линии подчеркивания*/
	background-color: #FF002F; /* Цвет левой линии подчеркивания */
	/* Скорость появления/исчезновения левой линии */
	transition: width .2s ease-in-out, left .2s ease-in-out;
	left: 50%; bottom: 0;
	}
a::after {
	display: block; position: absolute;  width: 0; content: "";
	height: 2px; /* Толщина правой линии подчеркивания*/
	background-color: #118EC7; /* Цвет правой линии подчеркивания */
	transition: width .2s ease-in-out; /* Скорость появления/исчезновения правой линии */
	left: 50%; bottom: 0;
	}
a:hover::before { width:50%; left:0; }
a:hover::after { width:50%; }

CSS стили примера №3

a { text-decoration: none; color: #118EC7;}
a:hover { text-decoration: none; }
a:hover:before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
	}
a:before {
	color: #343434; /* Цвет "прилетающего" текста */
	position: absolute; opacity: 0;
	content: attr(data-hover); /* Определяет "прилетающий" текст */
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	/* Скорость появления/исчезновения "прилетающего" текста */
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
	}

CSS стили примера №4

a {
	overflow: hidden; vertical-align: bottom; display: inline-block; 
	position: relative; text-decoration: none;
	}
a span {
	position: relative; display: inline-block;
	/* Скорость появления/исчезновения "выезжающего" текста */
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
	}	
a span:before {
	position: absolute; width: 100%;
	color: #343434; /* Цвет "выезжающего" текста */
	left: 0; top: 100%;
	content: attr(data-hover); /* Определяет "выезжающий" текст */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	}
a:hover span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
	}

Комментарии

  • Нет комментариев. Ваш будет первым!

Закрепленные

Понравившиеся

Чтобы оставить комментарий, необходимо авторизоваться!
Надежный хостинг, который стоит своих денег!

Авторизация

           

Последние комментарии

Илья Хасанов
Добрый день, на сайте https://yootheme.com/joomla-templates есть бесплатный шаблон https://prnt.sc/vqe77q, https://prnt.sc/vqe7rh
1 шаг к созданию собственного ...
26.11.2020
Дмитрий Филев
Добрый день!! Посоветуйте где взять хороший бесплатный шаблон, для сайта-визитка, блог? В вашем обучении на сайте yootheme.com нет бесплатных шаблонов...
1 шаг к созданию собственного ...
26.11.2020
Хасанов Илья
Здравствуйте, Олег! http://prntscr.com/hbnd1l
2 шаг к созданию собственного ...
17.11.2017
Олег Насиканов
Привет Илья, откуда на 3 минуте из папки дополнительные материалы берётся файл стилей. Где их взять? Заранее благодарен.
С уважением, Олег.
2 шаг к созданию собственного ...
17.11.2017
Роберт Сидоров
Существует ли модуль, отображения новостей как у Вас на сайте реализовано? Нужно, чтобы было разграничение новостей и дата отображалась как у Вас. Воз...
Mj Simple News - модуль вывода...
23.09.2017
Сергей Лаврик
Есть какой видосик по созданию безшовного фона?
Бесшовные фоны для сайта
17.07.2017

Полезные ссылки

  • Скачать
    • Актуальная версия CMS Joomla
    • Актуальная версия Denwer
    • Текстовый редактор Notepad++
    • FTP-менеджер Filezilla
  • Оптимизация кода сайта
    • Анализ сайта PageSpeed Insights
    • Анализ файла robots.txt
    • Проверка скорости загрузки сайта
    • Сжатие JS кода
    • Сжатие CSS кода
  • Ускорение индексации сайта
    • Ускорение индексации в Yandex
    • Ускорение индексации в Google
    • Ускорение индексации в Bing
    • Ускорение индексации в Mail.ru
  • Работа с текстом
    • Подбор ключевых слов Wordstat
    • Проверка текста на уникальность
  • Работа с графикой
    • Сжатие PNG без потерь качества
    • Сжатие JPG без потерь качества
    • Преобразовать PNG в SVG
    • Создать свой бесшовный фон
  • Прочее
    • Онлайн-конструктор карт
    • Генератор надежных паролей
    • Генератор QR-кода

Подписывайся на канал Youtube

Подписывайся на группу в ВК

 

Финансовая поддержка блога

Поддержка блога

Если Вы особо цените труд автора блога и желаете не просто отблагодарить его словестно, но еще и материально - данный раздел сайта создан специально для Вас!

  • Создать сайт на CMS Joomla
  • 1 шаг (подготовка)
  • 2 шаг (оформление)
  • 3 шаг (юзабилити)
  • 4 шаг (хостинг/домен)
  • Миграция сайта на CMS Joomla
  • С версии 2.5 на 3x
  • Расширения CMS Joomla
  • Компоненты
  • Плагины
  • Модули
  • CSS, HTML, JavaScript
  • Магия CSS стилей
  • Готовые CSS3 кнопки
  • Бесшовные фоны на чистом CSS
  • Скрипты
  • Графика и текст
  • Бесшовные фоны/паттерны
  • Шрифты для сайта
  • Прочее
  • Это должен знать каждый сайтостроитель!
  • Вопросы и ответы Joomla
  • Онлайн CSS генераторы
  • Создать CSS градиент
  • Создать CSS кнопку
  • Создать тень у текста
  • Создать тень у блоков
  • Заказать создание сайта
  • Вопросы и ответы
  • Оставить заявку на разработку сайта
  • Об авторе блога
  • Отзывы
  • Контактная информация

При полном или частичном копировании материалов сайта - ссылка на данный ресурс обязательна!
Бесплатные авторские видеоуроки и статьи о CMS Joomla | Ilyakhasanov.ru © 2017

  • База знаний
    • Создай свой сайт сам
      • 1 шаг (подготовка)
      • 2 шаг (оформление)
      • 3 шаг (юзабилити)
      • 4 шаг (хостинг/домен)
    • Миграция Joomla
      • C версии 2.5 на 3x
    • Расширения Joomla
      • Компоненты
      • Плагины
      • Модули
    • CSS, HTML, JavaScript
      • Магия CSS стилей
      • Готовые CSS3 кнопки
      • Скрипты
    • Графика и текст
      • Бесшовные фоны
      • Шрифты для сайта
    • Прочее
      • Нужно знать!
      • FAQ Joomla
      • Это интересно!
  • Онлайн-сервисы
    • CSS генераторы
      • Создать градиент
      • Создать кнопку
      • Создать тень у текста
      • Создать тень у блоков
  • Заказать сайт
    • Потенциальному заказчику
      • Вопросы и ответы
      • Заказ-онлайн
  • Отзывы
  • Контакты