Приветствую вас уважаемые читатели моего блога. Сегодня я хотел бы с вами поделиться коллекцией замечательных эффектов анимации для ссылок. Данная коллекция может вам весьма пригодиться при оформлении меню для вашего сайта.
Основная идея при создании анимации заключается в том, что для создания тонкого и современного эффекта перехода используются псевдоэлементы. Преимущественно во всех примерах эффект перехода начинается при наведении курсора мыши на ссылку, но вы также можете использовать эти эффекты при клике или в качестве первоначальной анимации.
Важно! Обратите внимание на то, что для создания эффектов переходов для псевдоэлементов используется CSS3 и HTML5, поэтому примеры не будут работать во всех браузерах и их лучше смотреть в Chrome или Firefox последних версий.
В большинстве случаев HTML раметка представляет из себя HTML5 навигацию:
<nav class="cl-effect-13">
<a href="#">Beleaguer</a>
<a href="#">Lassitude</a>
<a href="#">Murmurous</a>
<a href="#">Palimpsest</a>
<a href="#">Assemblage</a>
</nav>
Но для некоторых специальных эффектов мы будем использовать HTML5 атрибуты данных для повторения текста ссылки в псевдоэлементе:
<nav class="cl-effect-11">
<a href="#" data-hover="Desultory">Desultory</a>
<a href="#" data-hover="Sumptuous">Sumptuous</a>
<a href="#" data-hover="Scintilla">Scintilla</a>
<a href="#" data-hover="Propinquity">Propinquity</a>
<a href="#" data-hover="Harbinger">Harbinger</a>
</nav>
Также для тех эффектов в которых используется перспектива в HTML5 разметку будет добавлен span, пример такой разметки представлен ниже:
<nav class="cl-effect-10">
<a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
<a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
<a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
<a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
<a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>
Все стили необходимые для создание эффекта применяются к классу эффекта, CSS3 код типового эффекта представлен ниже:
/* Effect 15: scale down, reveal */
.cl-effect-15 a {
color: rgba(0,0,0,0.2);
font-weight: 700;
text-shadow: none;
}
.cl-effect-15 a::before {
color: #fff;
content: attr(data-hover);
position: absolute;
transition: transform 0.3s, opacity 0.3s;
}
.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
transform: scale(0.9);
opacity: 0;
}
Я надеюсь, что эта коллекция даст вам необходимое вдохновение для создания интересных эффектов для меню вашего сайта.
Так же хотел бы обратить ваше внимание на то, что IE10 не поддерживает свойство transform-style: preserve-3d, которое используется в некоторых примерах.
Надеюсь, вам понравились эти эффекты!