ZorNet.Ru — сайт для вебмастера » HTML и CSS » Вращающиеся социальные иконки на CSS

Вращающиеся социальные иконки на CSS

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

Здесь идет размер иконок 64x64px, что больше можно отнести к стандартному, но также не забываем, что вы сами можете поставить тот элемент, который также будет производить вращение, как только наведен курсор на саму основу. Цветовую гамму, включая размер и остальные элементы стилистики кнопок, это легко изменяется в CSS. Что можно отлично отредактировать под любой формат сайта, как под светлый стиль или под темные формы.

Сами кнопки выполнены виде звездочек:

Красивый эффект вращение при наведение клика

Установка:

HTML

Код

CSS

Код

/* Вращающиеся иконки социальных сетей на чистом CSS */
ul.dotsianyka_setey_chistom{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.dotsianyka_setey_chistom li{
display: inline-block;
width: 70px; /* Размер фона под иконкой */
height: 70px; /* Размер фона под иконкой */
margin-right: 10px;
background: white; /* Цвет фона */
text-transform: uppercase;
text-align: center;
cursor: pointer;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
}
ul.dotsianyka_setey_chistom li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.dotsianyka_setey_chistom li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 3px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.dotsianyka_setey_chistom li a img{
border-width: 0;
}
ul.dotsianyka_setey_chistom li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #f3be8138; /* Цвет 3D фона */
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.dotsianyka_setey_chistom li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

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

Демонстрация

07 Февраля 2020 Загрузок: 2 Просмотров: 1203 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0