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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전
By DDD

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7315
9


자바 튜토리얼
1625
14


Cakephp 튜토리얼
1348
46


라라벨 튜토리얼
1261
25


PHP 튜토리얼
1208
29



Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교
