ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стильные hover-эффекты для формы круга на CSS

Стильные hover-эффекты для формы круга на CSS

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

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

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

Так смотрится, когда наводишь клик:

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

HTML

Код

CSS

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

Код

.sedtoset-ekgactus a {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  z-index:100
}

.teraclase-saregrom {
  text-align: center;
  margin: 0 auto;
  padding: 3em 0 4em;
}

.sedtoset-ekgactus {
  display: inline-block;
  font-size: 0px;
  cursor: pointer;
  margin: 9px 27px;
  width: 87px;
  height: 87px;
  border-radius: 98%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #f1f1f1;
}

.sedtoset-ekgactus:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 98%;
  content: '';
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.sedtoset-ekgactus:before {
  speak: none;
  font-size: 51px;
  line-height: 89px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  display: block;
  -webkit-font-smoothing: antialiased;
}
/* end global styles */

/* Effect 8 */
.usedtos-etupinks .sedtoset-ekgactus {
  background: rgba(251, 249, 249, 0.08);
  -webkit-transition: -webkit-transform ease-out 0.2s, background 0.3s;
  -moz-transition: -moz-transform ease-out 0.2s, background 0.3s;
  transition: transform ease-out 0.2s, background 0.3s;
}

.usedtos-etupinks .sedtoset-ekgactus:after {
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  box-shadow: 0 0 0 1px rgba(249, 248, 248, 0.07);
  opacity: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

.no-touch .usedtos-etupinks .sedtoset-ekgactus:hover {
  background: rgba(245, 242, 242, 0.03);
  -webkit-transform: scale(0.89);
  -moz-transform: scale(0.89);
  -ms-transform: scale(0.89);
  transform: scale(0.89);
  color: #fdfdfd;
}

.usedtos-etupinks .sedtoset-ekgactus:hover:after {
  -webkit-animation: sonarEffect 1.5s ease-out 75ms;
  -moz-animation: sonarEffect 1.5s ease-out 75ms;
  animation: sonarEffect 1.5s ease-out 75ms;
}

@-webkit-keyframes sonarEffect {
  0% {
  opacity: 0.3;
  }
  40% {
  opacity: 0.5;
  box-shadow: 0 0 0 2px rgba(251, 248, 248, 0.09), 0 0 8px 8px #344bab, 0 0 0 8px rgba(249, 248, 248, 0.44);
  }
  100% {
  box-shadow: 0 0 0 2px rgba(247, 246, 246, 0.08), 0 0 8px 8px #344bab, 0 0 0 10px rgba(247, 246, 246, 0.45);
  -webkit-transform: scale(1.5);
  opacity: 0;
  }
}
@-moz-keyframes sonarEffect {
  0% {
  opacity: 0.3;
  }
  40% {
  opacity: 0.5;
  box-shadow: 0 0 0 2px rgba(251, 249, 249, 0.08), 0 0 8px 8px #344bab, 0 0 0 10px rgba(245, 243, 243, 0.48);
  }
  100% {
  box-shadow: 0 0 0 2px rgba(251, 249, 249, 0.44), 0 0 8px 8px #4259bd, 0 0 0 10px rgba(253, 250, 250, 0.48);
  -moz-transform: scale(1.5);
  opacity: 0;
  }
}
@keyframes sonarEffect {
  0% {
  opacity: 0.2;
  }
  40% {
  opacity: 0.3;
  box-shadow: 0 0 0 2px rgba(253, 252, 252, 0.07), 0 0 10px 10px #394ea9, 0 0 0 10px rgba(251, 249, 249, 0.47);
  }
  100% {
  box-shadow: 0 0 0 2px rgba(251, 250, 250, 0.07), 0 0 9px 9px #3954c5, 0 0 0 10px rgba(247, 245, 245, 0.46);
  transform: scale(1.5);
  opacity: 0;
  }
}

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

Можете в разном плане использовать значки Font awesome с эффектами hover с использованием CSS3. Как с ними работать, то в статье подробно описано, этот он начало, как поставить на интернет ресурс с подключением и выбором по тематическому наклонению.

Демонстрация проверки одного эффекта

Demo на все эффекты: beantowndesign.com/posts/css3-round-hover-effects-font-awesome

04 Августа 2018 Просмотров: 1742 Комментариев: (0)

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

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

Kosten

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