Простой эффект при наводке мыши по иконке
- Details
- Published on Thursday, 27 June 2013 10:09
Сегодня мы посмотрим на то, как можно применить простой эффект при наводке мыши по иконке с помощью 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); } }
Надеемся, данные эффекты вам пригодятся.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/f9pEEBwlgRY/lessons.php
Download SocComments v1.3