ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вращающиеся иконки при помощи стиля CSS3

Вращающиеся иконки при помощи стиля 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 Апреля 2017 Просмотров: 2728 Комментариев: (2)

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

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

Оставь свой отзыв

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