Сдвигающиеся под курсором ссылки
(при помощи CSS)
В данной теме мы Вам расскажем, как при помощи CSS сделать простые ссылки, которые будут плавно сдвигаться в сторону при наведении на них курсора мышки.
Ранее мы уже рассматривали, как реализовать подобные сдвигающиеся ссылки при помощи JavaScript кода в теме Сдвигающиеся под курсором ссылки, но нам прислали вариант реализации данного смещения при помощи CSS.
Для наглядного примера работы скрипта создания сдвигающихся ссылок при помощи CSS, обратите внимание на ссылки, расположенные ниже. При наведении курсора мышки на одну из ссылок, она плавно сдвинется вправо на указанное значение (не работает в старых браузерах IE).
Для получения на Вашей страничке аналогичных сдвигающихся ссылок для начала Вам необходимо прописать стиль данных ссылок. Для этого между тегами <head></head> добавьте следующий код:
<style type="text/css">
.left {
text-align: left;
margin: 5px;
-webkit-transition: -webkit-transform 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-in;
-ms-transition: -ms-transform 0.3s ease-in;
}
.left:hover {
-ms-transform: translate(25px);
-moz-transform: translate(25px);
-webkit-transform: translate(25px);
-o-transform: translate(25px);
cursor: pointer;
}
</style>
Все ссылки, к которым необходимо применить эффект плавного смещения, следует оформлять следующим образом:
<p class="left"><a href="http://UsefulScript.ru">Сдвигающийся текст на CSS</a></p>
<p class="left"><a href="http://UsefulScript.ru">Сдвигающийся текст на CSS</a></p>
<p class="left"><a href="http://UsefulScript.ru">Сдвигающийся текст на CSS</a></p>
По сравнению со способом, приведенным в теме Сдвигающиеся под курсором ссылки, у данного способа обнаружилось пару незначительных минусов: при наведении курсора текст немного смазывается (в браузере Опера) и не работает в браузере IE. При этом имеется пара хороших плюсов: не нужно загружать тяжелую библиотеку jQuery и работает при выключенном JavaScript в браузере. А какой из предложенных методов использовать - выбирать Вам.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Заранее благодарен.