Сейчас: 15:14:31   28-го марта 2024 г.
UsefulScript.ruСкриптыТекстовые эффектыСдвигающиеся ссылки (на CSS)
5
22

Сдвигающиеся под курсором ссылки
(при помощи CSS)

В данной теме мы Вам расскажем, как при помощи CSS сделать простые ссылки, которые будут плавно сдвигаться в сторону при наведении на них курсора мышки.


Ранее мы уже рассматривали, как реализовать подобные сдвигающиеся ссылки при помощи JavaScript кода в теме Сдвигающиеся под курсором ссылки, но нам прислали вариант реализации данного смещения при помощи CSS.


Для наглядного примера работы скрипта создания сдвигающихся ссылок при помощи CSS, обратите внимание на ссылки, расположенные ниже. При наведении курсора мышки на одну из ссылок, она плавно сдвинется вправо на указанное значение (не работает в старых браузерах IE).


Сдвигающийся текст на CSS

Сдвигающийся текст на CSS

Сдвигающийся текст на CSS


Для получения на Вашей страничке аналогичных сдвигающихся ссылок для начала Вам необходимо прописать стиль данных ссылок. Для этого между тегами <head></head> добавьте следующий код:

HTML код:
<style type="text/css">
.
left {
    
text-alignleft;
    
margin5px;
    -
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-transformtranslate(25px);
    -
moz-transformtranslate(25px);
    -
webkit-transformtranslate(25px);
    -
o-transformtranslate(25px);
    
cursorpointer;
}
</
style>

Все ссылки, к которым необходимо применить эффект плавного смещения, следует оформлять следующим образом:

HTML код:
<class="left"><a href="http://UsefulScript.ru">Сдвигающийся текст на CSS</a></p>
<
class="left"><a href="http://UsefulScript.ru">Сдвигающийся текст на CSS</a></p>
<
class="left"><a href="http://UsefulScript.ru">Сдвигающийся текст на CSS</a></p>

По сравнению со способом, приведенным в теме Сдвигающиеся под курсором ссылки, у данного способа обнаружилось пару незначительных минусов: при наведении курсора текст немного смазывается (в браузере Опера) и не работает в браузере IE. При этом имеется пара хороших плюсов: не нужно загружать тяжелую библиотеку jQuery и работает при выключенном JavaScript в браузере. А какой из предложенных методов использовать - выбирать Вам.

Дата создания: 20:28:51 17.07.2012 г.
Дата обновления: 20:34:59 17.07.2012 г.
Посещений: 6052 раз(а).

Комментарии посетителей (2 шт.):
Матвей
1
# 720
(20:11:28  29.03.2013 г.)

Здравствуйте, а как увеличить и изменить цвет текста ссылки?
Заранее благодарен.
Ответить

Administrator
0
# 723
(15:27:06  30.03.2013 г.)

Внутрь тега ссылки добавьте, например, style="font-size: 26px; color: red;"
Ответить

Закрыть
Ваше имя:
430 + 4 =
Добавить комментарий:
Ваше имя:
430 + 4 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 7

Мешает ли Вам реклама?