Code Ready | Frontend

✅ Как создать анимированные буквы при наведении?



Создание анимированных букв при наведении может добавить захватывающий и привлекательный вид вашему тексту. Данная анимация, создана только с помощью HTML и CSS, что делает её легко переносимым на разные веб-сайты.



☑️ Делимся ниже HTML и CSS кодом, для создания крутых анимированных букв при наведении:



HTML ⤵️

<div class="animated">

  <div class="let">A</div>

  <div class="let">n</div>

  <div class="let">i</div>

  <div class="let">m</div>

  <div class="let">a</div>

  <div class="let">t</div>

  <div class="let">e</div>

  <div class="let">d</div>

</div>

CSS ⤵️

body{ background-color: #000; }



.animated{

  display: flex;

  margin-top: 20%;

  align-items: center;

  justify-content: center;

}

.let{

  color: #fff;

  font-size: 70px;

  font-family: cursive;

  letter-spacing: 3px;

  font-weight: 600;

  transition: 0.5s;

  cursor: pointer;

}

.let:hover{

  transform: translateY(-1rem);

  background: -webkit-linear-gradient(120deg, hsl(190, 100%, 50%), hsl(319, 100%, 50%));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}





#практика #html #css