ZorNet.Ru — сайт для вебмастера » HTML и CSS » Круглые кнопки социальных сетей для сайта

Круглые кнопки социальных сетей для сайта

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

Анимация, который появляется с повышенной частотой, это вращающееся изображение, как и говорилось ранее, а точнее, значки в окружной форме. Наведите указатель мыши на значок, и он начинает с указанной скоростью вращается на своей оси, чтобы привлечь внимание к себе, что отлично смотрится на любой тематике для интернета площадки. Это реализовано с помощью CSS3 transform: rotate(xdeg)property. Используя его, вы можете поворачивать элемент на любое количество градусов, по стреле на часах или против часового круга, и делать ли это один или оба способа изменения состояния.

HTML

Вращение на 360 градусов

Код

60-градусный поворот

Код

На 360 градусов

Код

CSS

Код

p#osaretunidzequn img{
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}

p#osaretunidzequn img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#kahdsruasunfax img{
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

p#kahdsruasunfax img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#trasedtuqarindug img{
}

p#trasedtuqarindug img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

Положительная степень внутри transform: rotate(xdeg) будет по умолчанию вращает элемент в ту сторону как на стрелке часовой, в то время как отрицательный, а точнее -360deg вращает его против аналога.

Чтобы оживить это свойство, чтобы элемент фактически вращался в нужное положение, также используйте transition свойство при помощи CSS3.

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

11 Июня 2018 Просмотров: 1318 Комментариев: (0)

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

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

Kosten

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