CSS를 사용하여 호버에 대한 슬라이딩 배경색 변경을 어떻게 만들 수 있습니까?

슬라이딩 애니메이션으로 배경색 변환

CSS 전환을 통해 마우스를 가져가면 요소의 배경 색조를 변경하려고 하면 다음과 같은 과제에 직면하게 됩니다. 위쪽으로 스크롤되는 효과를 얻습니다. 현재 CSS 코드는 배경을 흐리게 하지만 매끄러운 슬라이드 애니메이션을 원합니다.

한 가지 접근 방식은 배경 이미지나 그라데이션을 활용하고 배경 위치를 꼼꼼하게 조정하는 것입니다. 이 기술을 사용하면 배경을 아래쪽에서 슬라이드할 수 있습니다.

다음 예를 고려하세요.

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

<div class="box"></div>

이 방법을 사용하면 배경이 처음에 위쪽에는 빨간색으로 표시되고 검은색으로 표시됩니다. 하반부에. 마우스를 올리면 배경이 위로 슬라이드되어 빨간색이 전체 요소의 높이로 부드럽게 전환됩니다.

위 내용은 CSS를 사용하여 호버에 대한 슬라이딩 배경색 변경을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!