CSS의 전환 속성 및 구현 방법

이 글의 내용은 CSS 전환의 속성과 구현 방법에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

참고: IE9 및 이전 IE 버전은 전환을 지원하지 않습니다! Safari 트래픽 장치를 작성하려면 -webkit- 등의 접두사를 추가해야 합니다!

1. 전환은 마우스가 요소 위로 이동할 때 한 스타일에서 다른 스타일로 변경될 수 있음을 의미합니다.

2. 구현 방법:

1.

.panel:target{
	margin-top: 0%;
	background-color: #ffcb00;
}

2 스타일을 지정합니다.

.panel{
    -webkit-transition: all .8s ease-in-out;
	-moz-transition: all .8s ease-in-out;
	-o-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;

2. 시간을 지정합니다(기본값은 0이며 지정하지 않으면 효과가 없습니다).

3. 구문: 전환: 속성 기간 타이밍-함수 지연;

항목별 각 속성 작성 방법 분석:

1. 전환 속성(CSS 속성 지정) :none(어떤 속성도 전환 효과를 얻지 못함) ); all(기본적으로 모든 속성은 전환 효과를 얻습니다.) 속성(전환 효과의 적용을 정의하는 쉼표로 구분된 CSS 속성 목록)

2, 전환 기간(시간 지정) 전환 효과를 완료하는 데 소요되는 시간) :time(전환 효과를 완료하는 데 걸리는 시간을 지정, 기본값은 0)

3. 전환 타이밍 기능(전환 효과의 속도 지정) : 선형 (같은 속도로 시작하고 끝나는 전환 효과 지정) 느린 속도로 시작하는 효과), 느린 속도로 끝나는 전환 효과 지정), 느린 속도로 시작하고 끝나는 전환 효과 지정(n) , n, n, n) (3차 베지어 함수에서 고유한 값을 정의합니다. 가능한 유일한 값은 0-1 사이입니다.)

4. 전환 지연(전환 효과가 시작되는 시기 지정) : 시간(전환 효과가 시작되기 전에 대기할 초 또는 밀리초를 지정합니다. 기본값은 0입니다.)

관련 권장 사항:

background-orgin in css3 사용 방법(코드 포함)

css 방법 opacity 속성을 사용하여 배경 이미지(코드)에 투명도를 추가하세요

위 내용은 CSS의 전환 속성 및 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!