Вращающиеся иконки при помощи стиля CSS3 - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Трудно сейчас представить сайт, где бы не было социальных иконок, для этого вам предоставляем скрипт с эффектом вращение по клику. Сами они сделаны так, что могут подойти на любой фон интернет ресурса. Здесь приложены самые актуальные социальные сети. Будет идти на них код и стили, что вы сами можете отредактировать как вы видите. Здесь можно поставить как в низ ресурса или в то место, где находится тот или иной материал, что будет здесь, хорошим вариантом.

Это может быть простой софт или магазин и кино сайт, так как у множества пользователей есть свои социальные аккаунты, то сейчас уже стало можно хороший материал разместить на своей странице. А это для сайта безусловно хорошая реклама будет. Здесь кто-то может сказать, что не все кнопки, под это идет ссылка, что можете найти другие по дизайн и просто заменить. Главное по расстоянию все выставить как идет на оригинальное изображение, чтоб эффект корректно работал.

Такой эффект должен быть:



Приступаем к установке:

Устанавливаем код, где вы хотите кнопки видеть.

Код
<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); }


Работать будут по принципу открывание окна и только там вы можете добавить. Но здесь можно понять, что дизайн и эффект стоит на первом месте, потом уже сама функция.

Важно!

При копировании материала указывать ссылку на источник.

- 370
- 02-Мая-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта