ruarhyzh-CNcsdanlenfrkadeeliwitjakoestr

Предлагаем широкий спектр веб услуг по разработке, поддержке и продвижению веб-сайтов.
Гарантируем качество и высокий уровень сдаваемых проектов с 2006 года.

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

 

 

<style>
#leftt p a {margin:5px; display:block;
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-opera-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;}

#leftt p a:hover {cursor: pointer;  
transform:translate(20px,0);
-moz-transform:translate(20px,0);
-webkit-transform:translate(20px,0);
-khtml-transform:translate(20px,0);
-opera-transform:translate(20px,0);
-ms-transform:translate(20px,0);}
</style>

 

HTML разметка кода:

<div id="leftt">
 <p>  <a href="#">Сдвигающаяся CSS  ссылка 1</a> </p>
 <p>  <a href="#">Сдвигающаяся CSS ссылка 2</a> </p>
</div>

 


e-mail

All rights reserved. © 2006-2021. При перепечатке текстов, активная, видимая ссылка на TopWebDesign.ru обязательна.

Сайт носит исключительно информационный характер и никакая информация, опубликованная на нём, ни при каких условиях не является публичной офертой, определяемой положениями статьи 437 Гражданского кодекса РФ. Настоящий ресурс может содержать материалы 18+

Продолжая использовать наш сайт, Вы даете согласие на обработку файлов cookies и пользовательских данных, подробнее в нашей Политике Cookie. Если Вы не хотите, чтобы Ваши данные обрабатывались, пожалуйста, покиньте сайт.

Наверх Вниз