» »

Вращающиеся иконки при помощи стиля CSS3

Вращающиеся иконки при помощи стиля 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); }

Работать будут по принципу открывание окна и только там вы можете добавить. Но здесь можно понять, что дизайн и эффект стоит на первом месте, потом уже сама функция.
29.04.2017 Просмотров: 608 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Kolinkor
Kolinkor 29.04.2017 23:191
0
Если вертикально будут стоять, то думаю очень нужно поискать сайт, где бы подошел, а просто влез этот скрипт с кнопками.
Maryges
Maryges 30.04.2017 00:142
0
Почему они должны вертикальные быть, хотя меня от сервис вполне устраивает.
avatar