Простой эффект при наводке мыши по иконке

demosourse

Сегодня мы посмотрим на то, как можно применить простой эффект при наводке мыши по иконке с помощью CSS трансформаций, анимации и применения псевдо классов. В качестве иконок будем использовать приложение IcoMoon.

В качестве HTML элементов, будем использовать ссылки и применять к ним множество эффектов:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>
    <a href="#" class="hi-icon hi-icon-earth">Partners</a>
    <a href="#" class="hi-icon hi-icon-support">Support</a>
    <a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

Пример создания эффекта:

.hi-icon-effect-6 .hi-icon {
    box-shadow: 0 0 0 4px rgba(255,255,255,1);
    transition: background 0.2s, color 0.2s;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
    background: rgba(255,255,255,1);
    color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
    animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg);
    }
}

Надеемся, данные эффекты вам пригодятся.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/
Перевел: Станислав Протасевич
Урок создан: 19 Июня 2013
Просмотров: 24431
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 21 Июня 2013 00:16
    dima.london
    Лол. Попов не знает, что такое кроссбраузерность? В данном примере к свойствам box-shadow, transform, transition и animate ОБЯЗАТЕЛЬНО нужно применять префиксы -moz-, -o- и -webkit-, иначе тупо не будет работать в 90% браузеров.
    • 21 Июня 2013 04:33
      ssdd
      Это перевод урока с tympanus, и при чем чем здесь Попов lol ???
      • 21 Июня 2013 07:53
        yamudryy
        ну там же подключен хитрожопый js
    • 21 Июня 2013 11:55
      lshockdownl
      а так-то уже давно больше половины браузеров не используют вендорные префиксы с свойству
      box-shadow
      . Firefox 3.6+ не нуждается в -moz- chrome с 16.0. Просто был приведен фрагмент из кода для ознакомления, а в таких случаях префиксы обычно опускаются
  • 21 Июня 2013 08:47
    Angel0s
    Господа критики, может кто-то из вас урок напишет? или найдет и переведет? К чему безосновательные претензии? Станислав Протасевич, за урок спасибо, пригодится.
  • 21 Июня 2013 09:59
    ppaull
    Нормальные эффекты. И кроме ИЕ везде смотрибельны, даже в Опере ... с определенными огрехами
  • 21 Июня 2013 13:18
    ferzisdis
    Здравствуйте, прошу прощение, что пишу не в тему, но уже сломал голову над своей проблемой(((. Я отправляю ajax запрос к файлу some.php . В итоге я должен получить html текст и вставить его в документ. После этого, блок, который я вставил должен реагировать на щелчок мыши и выводить определенное сообщение на экран. Но это к сожалению не происходит. Что мне делать?
    • 21 Июня 2013 16:28
      n1ko
      .live('click', function(){alert('1');}); // либо onclick
      .on('click', function(){alert('1');});
      Уже не помню, может поможет
  • 21 Июня 2013 22:34
    rubyx
    на синем фоне никакого эффекта нету :)
  • 22 Июня 2013 11:12
    LinuX_UseR
    Привыкли на всё готовое, а ума довести до нужного вида не хватает? За перевод спасибо огромное, однозначно в закладки. ЗЫ в адаптировал под 7осла)
  • 22 Июня 2013 18:25
    WooX
    Спасибо. Не подскажете как реализовать кроссбраузерно? В частности интересует set-6 (вращение изображения на 360 градусов)
  • 23 Июня 2013 10:06
    Евгений
    Приятно когда для тебя находят вот такие вот прелести, ещё и делают хороший перевод. На русском подсознание всё равно как-то лучше воспринимает. Было бы классно если бы ещё на сайте появилось парочка топиков о том, какие можно использовать скрипты для полной кроссбраузерности. Ну типа подборка всяких там pie и всякого остального для отображения CCS3 штучек. Вообще был бы полный респект:)
  • 3 Июля 2013 14:02
    mmaawwkkaa
    Неплохо было бы примеры сразу
  • 4 Июля 2013 00:31
    marat.dimaev
    круто..в закладки..
  • 30 Августа 2013 10:02
    dvigok
    Как изменить рисунки внутри кругов? Заранее спасибо
^ Наверх ^