Сегодня мы посмотрим на то, как можно применить простой эффект при наводке мыши по иконке с помощью CSS трансформаций, анимации и применения псевдо классов. В качестве иконок будем использовать приложение IcoMoon. В качестве HTML элементов, будем использовать ссылки и применять к ним множество эффектов: 1 <div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a"> 2 <a href="#" class="hi-icon hi-icon-mobile">Mobile</a> 3 <a href="#" class="hi-icon hi-icon-screen">Desktop</a> 4 <a href="#" class="hi-icon hi-icon-earth">Partners</a> 5 <a href="#" class="hi-icon hi-icon-support">Support</a> 6 <a href="#" class="hi-icon hi-icon-locked">Security</a> 7 </div> Пример создания эффекта: 01 .hi-icon-effect-6 .hi-icon { 02 box-shadow: 0 0 0 4px rgba(255,255,255,1); 03 transition: background 0.2s, color 0.2s; 04 } 05 06 .no-touch .hi-icon-effect-6 .hi-icon:hover { 07 background: rgba(255,255,255,1); 08 color: #64bb5d; 09 } 10 11 .no-touch .hi-icon-effect-6 .hi-icon:hover:before { 12 animation: spinAround 2s linear infinite; 13 } 14 15 @keyframes spinAround { 16 from { 17 transform: rotate(0deg) 18 } 19 to { 20 transform: rotate(360deg); 21 } 22 } Надеемся, данные эффекты вам пригодятся.