Анимация движения ссылок с помощью CSS3

Одним из самых популярных и простых эффектов на CSS3, является анимация движения ссылок.

Такую вещь можно сделать и на JavaScript ( включая MooTools, jQuery и Dojo Toolkit) и на CSS3. Чем сегодня и займемся.

CSS3

Первый шаг, определить основные элементы для анимации:

Основные параметры для анимации задали, теперь повесим свойство padding при наведении на элемент мышкой.

Как только на анкоре срабатывает hover, ссылка анимируется передвижением слева направо за 250 миллисекунд. Бум! Анимация движения ссылок без JavaScript готова.

Однако, помните, что в CSS нет обратной связи, и если вам нужно что-то посложнее, тогда без JavaScript никак не обойтись.

Бонус. Анимация движения ссылок на jQuery


3 комментарий на “Анимация движения ссылок с помощью CSS3

  1. Здравствуйте! Подскажите пожалуйста, куда вставлять код

    $(document).ready (function () {

    $('a.nudge').hover (function () { //mouse in

    $(this).animate ({ paddingLeft: '20px' }, 400);

    }, function () { //mouse out

    $(this).animate ({ paddingLeft: 0 }, 400);

    });

    });

    на WordPress?

    Thumb up 0 Thumb down 0

Оставить комментарий