Вращающиеся иконки при помощи стиля CSS3
 | |
| Трудно сейчас представить сайт, где бы не было социальных иконок, для этого вам предоставляем скрипт с эффектом вращение по клику. Сами они сделаны так, что могут подойти на любой фон интернет ресурса. Здесь приложены самые актуальные социальные сети. Будет идти на них код и стили, что вы сами можете отредактировать как вы видите. Здесь можно поставить как в низ ресурса или в то место, где находится тот или иной материал, что будет здесь, хорошим вариантом. Это может быть простой софт или магазин и кино сайт, так как у множества пользователей есть свои социальные аккаунты, то сейчас уже стало можно хороший материал разместить на своей странице. А это для сайта безусловно хорошая реклама будет. Здесь кто-то может сказать, что не все кнопки, под это идет ссылка, что можете найти другие по дизайн и просто заменить. Главное по расстоянию все выставить как идет на оригинальное изображение, чтоб эффект корректно работал. Такой эффект должен быть:  Приступаем к установке: Устанавливаем код, где вы хотите кнопки видеть. Код <ul id="social" class="group"> <li class="twitter"><a href="/"><span></span>twitter</a></li> <li class="dribbble"><a href="/"><span></span>dribbble</a></li> <li class="lastfm"><a href="/"><span></span>last.fm</a></li> <li class="spotify"><a href="/"><span></span>Spotify</a></li> <li class="ember"><a href="/"><span></span>ember</a></li> <li class="inspectelement"><a href="/"><span></span>Inspect Element</a></li> </ul> Это стили под них в CSS: Код li a span { background: url(http://zornet.ru/Fresa/AB/fega/daspunter.png) no-repeat; display: block; width: 30px; height: 32px; position: relative; z-index: 10; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } li a:hover span { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } Работать будут по принципу открывание окна и только там вы можете добавить. Но здесь можно понять, что дизайн и эффект стоит на первом месте, потом уже сама функция. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
