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

5 эффектов при наведение курсора на CSS

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

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

Варианты:

Чтоб понять работу, то вот изображение, где наводим клик и знаки с названием меняются в оригинальной анимацией, это не простая смена цвета, а присутствие анамаций этот эффект делает намного оригинальнее и красивее.

CSS создать динамическую панель для навигации на сайте

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

HTML

Код

<section class="seneterminesev1">
  <nav class="kyodubecausen1">
  <a href="#" data-hover="Коды сайта">Коды сайта</a>
  <a href="#" data-hover="Скрипты">Скрипты</a>
  <a href="#" data-hover="Стилистика">Стилистика</a>
  <a href="#" data-hover="Дизайн сайта">Дизайн сайта</a>
  <a href="#" data-hover="Контакты">Контакты</a>
  </nav>
  </section>
  <section class="seneterminesev2">
  <nav class="kyodubecausen2">
  <a href="#" data-hover="Портал">Портал</a>
  <a href="#" data-hover="Ссылка">Ссылка</a>
  <a href="#" data-hover="Портал">Портал</a>
  <a href="#" data-hover="Шаблоны">Шаблоны</a>
  <a href="#" data-hover="Новости">Новости</a>
  </nav>
  </section>
  <section class="seneterminesev3">
  <nav class="kyodubecausen3">
  <a href="#"><span data-hover="Брызг">Брызги</span></a>
  <a href="#"><span data-hover="Воин">Воин</span></a>
  <a href="#"><span data-hover="Каркас">Каркас</span></a>
  <a href="#"><span data-hover="Статьи">Статьи</span></a>
  <a href="#"><span data-hover="Калуга">Калуга</span></a>
  </nav>
  </section>
  <section class="seneterminesev4">
  <nav class="kyodubecausen4">
  <a href="#">Туркменистан</a>
  <a href="#">Создаемy</a>
  <a href="#">PHP</a>
  <a href="#">HTML5</a>
  <a href="#">Скрипты</a>
  </nav>
  </section>
  <section class="seneterminesev5">
  <nav class="kyodubecausen5">
  <a href="#" data-hover="Приборная"><span>Приборная</span></a>
  <a href="#" data-hover="Амоксиклав"><span>Амоксиклав</span></a>
  <a href="#" data-hover="CSS"><span>CSS</span></a>
  <a href="#" data-hover="Аналог"><span>Аналог</span></a>
  <a href="#" data-hover="Связист"><span>Связист</span></a>
  </nav>
  </section>

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

CSS

Стилистика CSS за этим эффектом на самом деле не сложный, давайте перейдем к правилу. Прежде всего главным является самое основное определение, как оттенок цвета, также веса ссылки самого текста.

Код

/* kyodubecausen 1 */
.kyodubecausen1 a {
  color: #a186be;
  text-transform: uppercase;
  font-weight: bold;
}

.kyodubecausen1 a::before {
  color: #662d91;
  position: absolute;
  content: attr(data-hover);

  transition: transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
}

.kyodubecausen1 a:hover::before,
.kyodubecausen1 a:focus::before {
  opacity: 0;
}

/* kyodubecausen 2 */
.kyodubecausen2 a {
  color: #a186be;
  padding: 10px 0;
}

.kyodubecausen2 a::before {
  color: #440e62;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 10px 0;
  max-width: 0;
  content: attr(data-hover);

  transition: max-width 0.5s;
  -moz-transition: max-width 0.5s;
  -webkit-transition: max-width 0.5s;
}

.kyodubecausen2 a:hover::before,
.kyodubecausen2 a:focus::before {
  max-width: 100%;
}

/* kyodubecausen 3 */
.kyodubecausen3 a {
  color: #c1add8;
  overflow: hidden;
  padding: 0 5px;
  height: 1em;

}

.kyodubecausen3 a span {
  position: relative;
  display: inline-block;

  transition: transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
}

.kyodubecausen3 a span::before {
  color: #440e62;
  position: absolute;
  top: 100%;
  content: attr(data-hover);

  transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

.kyodubecausen3 a:hover span,
.kyodubecausen3 a:focus span {
  transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

/* kyodubecausen 4 */
.kyodubecausen4 a {
  color: #662d91;
  padding: 10px 0;
}

.kyodubecausen4 a::after {
  background: #662d91;
  position: absolute;
  top: 100%;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  opacity: 0;

  transition: opacity 0.3s, transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
}

.kyodubecausen4 a:hover::after,
.kyodubecausen4 a:focus::after {
  opacity: 1;

  transform: translateY(0px);
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px);
}

/* kyodubecausen 5 */
.kyodubecausen5 {
  position: relative;
  z-index: 1;
}

.kyodubecausen5 a {
  margin: 0 15px;
  overflow: hidden;
}

.kyodubecausen5 a span {
  color: #a186be;
  background: #662d91;
  display: block;
  padding: 10px 20px;

  transition: transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
}

.kyodubecausen5 a::before {
  color: #662d91;
  background: #a186be;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  padding: 10px 0;
  width: 100%;
  height: 100%;
  content: attr(data-hover);

  transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

.kyodubecausen5 a:hover span,
.kyodubecausen5 a:focus span {
  transform: translateY(100%);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
}

.kyodubecausen5 a:hover::before,
.kyodubecausen5 a:focus::before {
  transform: translateY(0%);
  -moz-transform: translateY(0%);
  -webkit-transform: translateY(0%);
}

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

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

В приведенном ниже коде мы снова устанавливаем триггер. Наше определение подчеркивает, что 100% видимости и непрозрачности установлены на 1, где идет перемещение подчеркивания на оригинал Y, что равен 0. Там это вызывает отображение подчеркивания и навигационную ссылку ниже.

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

19 Февраля 2019 Загрузок: 1 Просмотров: 1366 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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