CSS를 사용하여 마우스 오버 시 슬라이딩 배경색 애니메이션을 어떻게 만들 수 있습니까?

슬라이딩 배경색 애니메이션

CSS 전환을 사용하여 마우스 오버 시 슬라이딩 배경색 애니메이션을 만드는 데 어려움을 겪었습니다. 페이딩 효과를 얻을 수 있으면서도 배경이 아래에서 위로 스크롤되도록 하려고 합니다.

해결책: 배경 이미지 사용

슬라이드 효과를 얻으려면 효과가 있으므로 CSS 전환만으로는 충분하지 않습니다. 대신 그라데이션과 같은 배경 이미지를 만들고 시간이 지남에 따라 위치를 조정해야 합니다. 이를 수행하는 방법은 다음과 같습니다.

코드 예:

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

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

HTML 마크업:

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

설명:

• .box 클래스는 크기, 그라데이션 이미지 및 전환 기간을 포함한 배경 속성을 정의합니다. .
• 마우스를 올리면 background-position 속성이 -100%로 조정되어 그라데이션 이미지가 슬라이드됩니다. 위로 올라가면 아래쪽에 붉은색이 드러납니다.
• 그라디언트 이미지를 사용하면 한쪽 끝에서 다른 쪽 끝으로 색상 전환이 원활하게 이루어질 수 있습니다.

대체 접근 방식:

그라디언트 이미지 접근 방식이 잘 작동하지만 원하는 배경으로 별도의 요소를 만들고 CSS 전환을 사용하는 것도 고려할 수 있습니다. 위로 스크롤합니다. 그러나 이 방법에는 추가 마크업과 복잡성이 포함될 수 있습니다.

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