CSS를 사용하여 왼쪽에서 오른쪽으로 움직이는 밑줄을 만들고 마우스 오버 시 반전시키려면 어떻게 해야 합니까?

밑줄 애니메이션: 왼쪽에서 오른쪽으로

uber.design의 전환 효과를 복제하는 과제는 마우스 오버 시 전환을 반전시키는 것입니다. 제공된 CSS는 밑줄을 왼쪽에서 오른쪽으로 애니메이션화할 수 있지만 애니메이션을 반전시키는 기능은 부족합니다.

원하는 효과를 얻기 위해 그라데이션과 배경 위치 지정의 조합을 활용할 수 있습니다. 요소에 선형 그래디언트를 적용하고 지연을 통해 배경 위치를 조정하면 밑줄이 왼쪽에서 오른쪽으로 확장되는 듯한 느낌을 줄 수 있습니다.

수정된 CSS는 다음과 같습니다.

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

이 코드는 요소에 선형 그래디언트를 생성하며 처음에는 왼쪽 하단(0% 100%)에 위치합니다. 마우스를 올리면 배경 위치가 오른쪽 하단(100% 100%)으로 변경되어 그라데이션이 요소의 너비를 확장하고 밑줄이 왼쪽에서 오른쪽으로 이동하는 효과를 생성합니다.

세밀하게 - 원하는 효과에 맞게 애니메이션을 조정하고 배경 크기 및 전환 기간 값을 조정하세요.

위 내용은 CSS를 사용하여 왼쪽에서 오른쪽으로 움직이는 밑줄을 만들고 마우스 오버 시 반전시키려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!