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

Эффект изменение цвета текста на CSS

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

Который заключается в том, что по умолчанию видим название в темной гамме, а после происходит анимация, что идет не сразу разом, а изменение происходит от одной стороны.

И теперь мы наблюдаем аналогичное слово в светлом оттенке, только по вверх сделана темная кнопка, и как будто получилось реальная кнопка с простых знаков, что сильно впечатляет. Но главное, все работает на чистом CSS, без задействования JavaScript и других плагинов.

По умолчанию:

При наведение:

Красивый эффект для знаков на чистом CSS

Начнем установочный процесс:

HTML

Код

<div class="tsvetovaya">
  <span class="animatsiya">
  <div class="amuzined" data-text="Zornet.Ru">Zornet.Ru</div>
  </span>

CSS

Код

.tsvetovaya{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.animatsiya{
  position: relative;
  display: inline-block;
  padding: 0 40px;
  cursor: pointer;
}

.amuzined {
  font-size: 75px;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  color: #1f5184;
}
.amuzined::before{
  content: attr(data-text);
  position: absolute;
  color: #e3e4e4;
  width: 0;
  overflow: hidden;
  transition: 0.6s;
}
.animatsiya::before{
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  background: #2980b9;
  right: 0;
  top: 0;
  transition: 0.6s;
}
.animatsiya:hover .amuzined::before,
.animatsiya:hover::before{
  width: 100%;
}

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

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

Видео обзор:

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

30 Августа 2019 Загрузок: 1 Просмотров: 1096 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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