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%;
}

이 예에서:

• .box 요소는 다음을 생성하는 선형 그라데이션으로 정의됩니다. 빨간색과 검은색 가로 분할.
• 초기 배경 위치를 0~100%로 설정하면 그라데이션이 숨겨집니다.
• 마우스를 올리면 배경 위치가 0 0으로 애니메이션화되어 아래쪽부터 그라데이션이 점차 드러납니다.

이 기술은 배경 색상 변경에 부드러운 슬라이딩 효과를 제공합니다. . 특정 배경 그라데이션이나 이미지를 원하는 경우 이 접근 방식이 효과적이므로 표준 페이딩 전환보다 더 많은 사용자 정의가 가능하다는 점은 주목할 가치가 있습니다.

위 내용은 CSS로 부드러운 슬라이딩 배경색 전환을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!