КОНСУЛЬТАЦИЯ

Эффект перехода при наведении мыши на текст

Данный код помогает добавить красивый переход на текст при наведении мыши. Можно поменять скорость перехода и цвет заднего фона

Как выглядит :

Скопируйте и вставьте код ниже в блок "ST123"

Создали элемент текст и присвоили ему тег h1

Вы можете присвоить свой class элементу текст и поменять его в коде

1
2
3

Что делаем :

Код для вставки
<style>

h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: #ff4621;
  z-index: -1;
  transition: transform .5s ease;
}

h1 {
  position: relative;
  font-size: 5rem;
}


@media (orientation: landscape) {
  body {
    grid-auto-flow: column;
  }
}

</style>
Больше модификаций

Возможно вы поверили в себя и сегодня нужно больше знаний. Посмотрите что есть еще интересного