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

Эффект анимации двух сторон кнопки на CSS

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

Один трюк, который очень легко реализовать и почти всегда отлично смотрится на таких объектах, как кнопки или навигационные ссылки, имеет переход фона с одного цвета на другой с помощью горизонтального эффекта протирания.

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

HTML

Код

<div id="zornet_ru_mudersken">
  <div class="lomudsa_nsagevin">
  <p>zornet.ru</p>
  <span class="sakilan"></span>
  <span class="lasmigem"></span>
  </div>
  </div>

CSS

Код

.lomudsa_nsagevin {
  width: 300px;
  height: auto;
  border: 3px solid #bb0000;
  padding: 20px;
  margin: 30px auto;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  overflow:hidden;
  cursor: pointer;
  font-size: 24px;
  color: #bb0000;
  box-sizing: border-box;
}

.lomudsa_nsagevin p {
  position: relative;
  z-index: 999;
}

.lomudsa_nsagevin:hover {
  color: #fff;
}

.lomudsa_nsagevin .sakilan {
  width: 100%;
  background-color: #bb0000;
  height: 60px;
  position: absolute;
  top: -98px;
  left: 0px;
  transform: skewY(10deg);
  transition: all 0.7s;
}

.lomudsa_nsagevin .lasmigem {
  width: 100%;
  background-color: #bb0000;
  height: 68px;
  position: absolute;
  top: 98px;
  left: 0px;
  transform: skewY(10deg);
  transition: all 0.8s;
}

.lomudsa_nsagevin:hover .sakilan {
  top: -30px;
  transition: all 0.8s;
}

.lomudsa_nsagevin:hover .lasmigem {
  top: 29px;
  transition: all 0.9s;
}

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

Поэтому, чтобы начать, вы захотите создать свой новый класс и дать ему некоторый базовый стиль. Вы можете использовать наш базовый код кнопки, что представлен, и также посмотреть Demo на обе кнопки и выбрать, ту что больше по анимации подходит.

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

02 Февраля 2018 Просмотров: 2497 Комментариев: (0)

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

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

Kosten

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