CSS를 사용하여 왼쪽에서 오른쪽으로 배경색 채우기

CSS에서는 선형 그라데이션을 활용하고 배경 위치 애니메이션을 적용하여 매력적인 호버 효과를 만들 수 있습니다. 이 접근 방식을 사용하면 마우스를 올리면 요소의 배경을 왼쪽에서 오른쪽으로 새 색상으로 채울 수 있습니다.

선형 그라데이션 및 배경 크기

핵심은 다음을 사용하는 것입니다. 두 가지 색상으로 구성된 선형 그라데이션 배경을 만들고 배경 크기를 요소 너비의 두 배로 설정합니다. 이를 통해 두 색상 사이를 원활하게 전환할 수 있습니다.

배경 위치 지정 및 애니메이션

처음에는 배경을 오른쪽에 배치하여 가장 왼쪽 색상부터 시작합니다. 마우스를 올리면 배경 위치를 왼쪽으로 변경하여 가장 오른쪽 색상을 표시합니다. 전환을 점진적으로 만들려면 전환을 추가하세요:all 2seasing; property.

코드 예

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

전환 사용자 정의

전환의 시작점과 끝점을 제어하려면 선형 그라데이션의 백분율을 조정합니다. 예를 들어 요소 너비의 34%에서 65%로 전환하는 구성은 다음과 같습니다.

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

이 기술을 구현하면 우아하고 시선을 사로잡는 호버 효과를 손쉽게 만들어 웹 애플리케이션의 사용자 경험을 향상시키고 디자인의 전체적인 시각적 매력을 향상시킬 수 있습니다.