전환

먼저 작은 예를 살펴보겠습니다

<p class="demo"></p>

로그인 후 복사

.demo {    width: 100px;    height: 100px;    background-color: royalblue;}.demo:hover {    width: 200px;}

로그인 후 복사

이렇게 하면 데모 위에 커서를 올리면
폭이 200px이 됩니다

커서가 요소 위에 있을 때 요소의 너비가 서서히 넓어지도록 하는 방법이 있나요?
CSS3 이전에는 번거로운 js스크립트
만 사용할 수 있었지만 이제는 필요한 것만 필요합니다.
속성을 추가하면

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s; /*增*/}.demo:hover {    width: 200px;}

로그인 후 복사

전환 목적을 달성할 수 있습니다. 그 기능은 요소의 특정 스타일이 변경될 때
이러한 스타일이 점진적으로 최종 속성 값
으로 전환될 수 있도록 지정하는 것입니다. 🎜>

복합 속성입니다

에는 다음과 같은 하위 속성이 있습니다

transition-property: 전환 또는 동적 시뮬레이션을 지정하는 CSS 속성
transition-duration: 전환에 필요한 시간 지정
transition-timing-function: 전환 지정
기능
transition-delay: 나타나기 시작하는 지연 시간을 지정합니다.

transition-property 전환하려는 속성을 쓸 수 있습니다

또는 간단히 전환 쓰기 모든 속성의 키워드
all

전환 지속 시간 그라데이션 시간 속성 값은 "숫자 + s"입니다.

몇 초 안에 전환을 나타냅니다

전환 타이밍 함수는 다음과 같은 선택적 값을 갖는 선택적 속성 값입니다.

선형
선형 전환, 등가 베지어 곡선(0.0, 0.0, 1.0, 1.0)
ease(기본값)
부드러운 전환, 등가 베지어 곡선(0.25, 0.1, 0.25, 1.0)
ease-in
느린 것에서 빠른 것까지, 베지어 곡선(0.42, 0, 1.0, 1.0)과 동일
ease-out
빠른 것에서 느린 것까지, 베지어 곡선(0, 0)과 동일 , 0.58, 1.0)
ease-in-out
느린 것에서 빠른 것, 다시 느린 것, 베지어 곡선(0.42, 0, 0.58 , 1.0)과 동일
step-start
는 steps(1, start)
step-
end 와 같습니다. steps(1, end)
steps():
두 매개변수의 단계 함수입니다. 첫 번째 매개변수는 양수
정수 로, 기능 단계 수를 지정합니다. 두 번째 매개변수의 값은 start 또는 end로, 각 단계의 값이 변경되는 시점을 지정합니다. 두 번째 매개변수는 선택사항이며 기본값은 end입니다.
cubic-bezier(num, num, num, num):
특정 베지어 곡선 유형, 4개의 값은 간격 [0, 1] 내에 있어야 합니다.

가장 일반적으로 사용되는 것은 기본 용이성 및 선형 전환입니다.

transition-delay도 선택적 속성 값입니다

전환을 지연시키려는 경우, 즉 전환 전에 잠시 중지하려면
이 복합 속성 끝에 "숫자 + s"를 지연하는 데 필요한 시간을 추가하세요

이 속성은 여러 가지 다른 속성을 설정할 수 있습니다

쉼표로 구분하기만 하면 됩니다

.demo {    width: 100px;    height: 100px;    background-color: royalblue;    transition: width 1s linear, 
                height 1s linear,
                background-color 2s 1s; /*改*/}.demo:hover {    width: 200px;    height: 200px;    background-color: lawngreen; /*改*/}

로그인 후 복사

마우스가 요소 밖으로 이동한 후 요소가 다시 전환됩니다

스크립트 대신 전환 속성을 사용하는 또 다른 이유는

여러 요소의 스타일을 변경하는 스크립트 메서드가 충돌을 일으킬 수 있기 때문입니다
해결책은 bool
변수를 사용하는 것입니다. 여전히 매우 어려운 잠금 문제 우리의
전환 속성은 그다지 고려할 필요가 없습니다요소가 서로 영향을 미치지 않습니다

또 주목해야 할 사항 요소 전환에는 스타일의 특정 시작 및 끝 속성을 알아야 합니다

예를 들어, 우리 예의 너비는 100px에서 200px로 명확하게 전환됩니다.

.demo:hover {    width: auto; /*改*/
    height: 200px;    background-color: lawngreen; /*改*/}

로그인 후 복사

플로팅 스타일 너비를 자동으로 변경합니다

우리는 커서가 요소를 가리키면 마지막
너비 속성이 전환되지 않습니다.

전환과 관련된 속성

물론 모든 스타일을 전환할 수 있는 것은 아닙니다

예를 들어 다음과 같은 경우 <a href="http://www.php.cn/wiki/927.html" target="_blank">display<br>:block</a> <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:blockdisplay:inline-block으로 전환하고 싶습니다. 그건 불가능합니다
예 다음 속성은 전환에 참여합니다