« 5 эффектов границ (border) перехода при наведении, на чистом CSS »

Описание материала:

Сегодня мы научимся создавать некоторые виды анимации при наведении границ (border) с использованием HTML и CSS. Другими словами, мы создадим некоторую анимацию при наведении, которая влияет на границы элементов. Если вы новичок, то вы без проблем, поймете код.

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

5 эффектов границ (border) перехода при наведении, на чистом CSS


Если вы сейчас думаете, как на самом деле выглядят эти эффекты, то посмотрите демонстративную страницу, ссылку на неё вы найдете после описания к материалу.

Установка:

HTML код:
Код
<div class="but_ufive round">по кругу</div>
<div class="but_ufive round two">в стороны</div>
<div class="but_ufive from-center">из центра</div>
<div class="but_ufive rotation">вращение</div>
<div class="but_ufive rotation around">вокруг</div>


CSS код:
Код
.but_ufive {
  background: none;
  text-align: center;
  border: 0;
  box-sizing: border-box;
  margin: 1em;
  padding: 1em 2em;
  box-shadow: inset 0 0 0 2px #f3be81;
  color: #f3be81;
  font-size: inherit;
  font-weight: 700;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  max-width: 400px;
}
.but_ufive::before,
.but_ufive::after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.round {
  transition: color 0.25s;
}
.round::before,
.round::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.round::before {
  top: 0;
  left: 0;
}
.round::after {
  bottom: 0;
  right: 0;
}
.round:hover {
  color: #393939;
}
.round:hover::before,
.round:hover::after {
  width: 100%;
  height: 100%;
}
.round:hover::before {
  border-top-color: #393939;
  border-right-color: #393939;
  transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.round:hover::after {
  border-bottom-color: #393939;
  border-left-color: #393939;
  transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s,
  height 0.25s ease-out 0.75s;
}
.two:hover {
  color: #393939;
}
.two::after {
  top: 0;
  left: 0;
}
.two:hover::before {
  border-top-color: #393939;
  border-right-color: #393939;
}
.two:hover::after {
  border-bottom-color: #393939;
  border-left-color: #393939;
  transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}
.from-center:hover {
  color: #393939;
}
.from-center::before,
.from-center::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
}
.from-center::before {
  border-top: 2px solid #393939;
  border-bottom: 2px solid #393939;
  transform: scale3d(0, 1, 1);
}
.from-center::after {
  border-left: 2px solid #393939;
  border-right: 2px solid #393939;
  transform: scale3d(1, 0, 1);
}
.from-center:hover::before,
.from-center:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform 0.5s;
}
.rotation {
  width: 8em;
  height: 8em;
  padding: 55px 0px 0px 0px;
}
.rotation:hover {
  color: #393939;
}
.rotation::before,
.rotation::after {
  top: 0;
  left: 0;
}
.rotation::before {
  border: 2px solid transparent;
}
.rotation:hover::before {
  border-top-color: #393939;
  border-right-color: #393939;
  border-bottom-color: #393939;
  transition: border-top-color 0.15s linear,
  border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.rotation::after {
  border: 0 solid transparent;
}
.rotation:hover::after {
  border-top: 2px solid #393939;
  border-left-width: 2px;
  border-right-width: 2px;
  transform: rotate(270deg);
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}
.around {
  border-radius: 100%;
  box-shadow: none;
}
.around::before,
.around::after {
  border-radius: 100%;
}


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

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

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 130


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

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