Простые иконки с эффектом при наведении + 17 вариантов
↓ Также Вам будет интересно ↓
Сегодня мы будем создавать простые иконки с эффектами при наведении. Идея состоит в том, чтобы создать простые, но стильные эффекты, используя CSS3 transitions анимации и псевдо-элементы. Также советую посмотреть пример современных 3D кнопок на CSS3.
Для иконок мы используем шрифт значков (Eco Ico by Matthew Skiles, созданный с помощью приложения :before
. Скачать иконки css Вы можете по ссылке выше.
HTML структура и CSS прелести
Для каждой иконки прописан соответствующий класс для вывода значка, и добавим дополнительный класс hi-icon
, который пригодится нам далее:
1 2 3 4 5 6 7 |
<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> |
Для использования шрифта иконок, необходимо подключить соответствующий шрифт (к исходникам прилагается) с помощью @font-face
, и делается это примерно так:
1 2 3 4 5 6 7 8 9 10 |
@font-face { font-family: 'ecoicon'; src:url('../fonts/ecoicons/ecoicon.eot'); src:url('../fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'), url('../fonts/ecoicons/ecoicon.woff') format('woff'), url('../fonts/ecoicons/ecoicon.ttf') format('truetype'), url('../fonts/ecoicons/ecoicon.svg#ecoicon') format('svg'); font-weight: normal; font-style: normal; } |
Только не забудьте прописать свои, правильные пути к файлам шрифта.
В исходниках Вы найдете 17 примеров или вариантов эффектов, которые Вы можете использовать. Для примера, возьмем эффект при наведении – простое вращение значка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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); } } |
Это только пример того, что можно сделать на CSS3, и это не предел – все зависит от Вашей фантазии. Надеюсь то, что Вы нашли в скачанном исходнике, Вам понравилось!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко