이 글의 내용은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!