Code Css Text Stagger Hover

Chào mọi người, lại tiếp tục với chuyên mục Css hay mỗi ngày, hôm nay mình chia sẽ đến mọi người một mẫu Css giúp dòng Text đó chuyển động khi các bạn rê chuột vào. Và ngược lại khi mọi người rê chuột ra khỏi khung chử thì nó sẽ trở về lại dòng chử ban đầu.
Bên dưới là hình ảnh demo.

Chúng ta bắt đầu tìm hiểu nhé.

Bước 1. Mọi người thêm đoạn code CSS này vào giao diện.

@import url('https://fonts.googleapis.com/css2?family=Manrope');

:root {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  --clr-bg: #020617;
  --clr-text: #fff;
}

body {
  height: 100svh;
  
  display: grid;
  place-items: center;
  
  font-family: "Manrope", sans-serif;
  
  background: var(--clr-bg);
  color: var(--clr-text);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  font-size: 4em;
/*   outline: solid red; */
  scale: 1 2;
}

p {
  --start: attr(data-text-start);
  --end: attr(data-text-end);
  text-transform: uppercase;
  line-height: .8;
  --t: 0%;
  
  &:hover {
    --t: 100%;
  }
  
  &::before {
    content: var(--end);
    opacity: 0;
  }
}

i {
  font-style: inherit;
  position: absolute;
  inset: 0;
  transition: 1s;
  --i: sibling-index();
  --n: sibling-count();
  transition-delay: calc(50ms * var(--i));
  --hairline-fix: 0.3%;
  --pt-height: calc(100% / var(--n));
  --y-start: calc(var(--pt-height) * (var(--i) - 1));
  --y-end: calc(var(--pt-height) * var(--i) + var(--hairline-fix));
  clip-path: polygon(
    0 var(--y-start), 
    100% var(--y-start), 
    100% var(--y-end), 
    0 var(--y-end)
  );
  
  &::before, &::after {
    position: absolute;
    transition: inherit;
  }
  &::before {
    content: var(--start);
    scale: 3.5 1;
    transform-origin: 0% 50%;
    transform: scaleX(calc(100% - var(--t)));
  }
  &::after {
    content: var(--end);
    transform-origin: 100% 50%;
    transform: scaleX(var(--t));
  }
}

Bước 2. Mọi người thêm thẻ HTML này vào khu vực bạn muốn tạo dòng chử chuyển động.

<main>
  <p data-text-start="GO" data-text-end="HUNG.PRO.VN">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </p>
</main>

Thay đổi những dòng text theo ý muốn của bạn nhé.

Chúc mọi người thành công.

DEMO THỦ THUẬT TẠI ĐÂY