CSS3 전환 전환 속성 속성

구문:

transition-property：all | none | <property>[ ,<property> ]*

매개변수 분석:
1.all: 전환할 수 있는 모든 속성을 설정합니다.
2.none: 전환할 수 있는 속성을 지정하지 마세요.
3.<property>: 전환할 수 있는 속성을 지정합니다.
특별 지침:
1. 여러 속성을 설정하는 경우 속성 이름을 쉼표로 구분하세요.
2. 해당 스크립트 속성은 TransitionProperty입니다.

transition-property는 요소의 속성 중 하나가 변경될 때 실행될 전환 효과를 지정하는 데 사용됩니다. 이는 주로 다음 값을 갖습니다: none(속성 변경 없음); 기본값은 들여쓰기(요소 속성 이름)입니다. 값이 없음이면 전환이 즉시 실행을 중지합니다. all로 지정하면 요소의 속성 값이 변경될 때 전환 효과가 실행됩니다. ident는 요소의 특정 속성 값을 지정할 수 있습니다. 해당 유형은 다음과 같습니다.

1. 색상: 배경색, 테두리 색상, 색상, 윤곽선 색상 및 기타 CSS 속성과 같은 빨간색, 녹색, 파란색 및 투명도 구성 요소(각 숫자 값이 처리됨)를 통해 변환됩니다.

2 , 길이: 단어 간격, 너비, 수직 정렬, 위쪽, 오른쪽, 아래쪽, 왼쪽, 패딩, 윤곽선 너비, 여백, 최소 너비, 최소 높이, 최대 너비와 같은 실수 최대 높이, 줄 높이, 높이, 테두리 너비, 테두리 간격, 배경 위치 및 기타 속성

3. 백분율: 단어 간격, 너비, 수직 정렬, 위쪽, 오른쪽 등의 실수 하단, 왼쪽, 최소 너비, 최소 높이, 최대 너비, 최대 높이, 줄 높이, 높이, 배경 위치 및 기타 속성

4, 정수 이산 단계(정수), 실수 공간에서, 그리고 Floor()를 사용하여 정수로 변환할 때 윤곽선 오프셋, Z-색인 등과 같은 속성이 발생합니다.

5. 확대/축소, 불투명도, 글꼴 두께와 같은 숫자의 실제(부동 소수점) 값, 및 기타 속성

6. 변환 목록: 자세한 내용은 "CSS3 변환"을 참조하세요.

7. 직사각형: x, y, 너비 및 높이(숫자 값으로 변환)를 통해 변환: 자르기

8. 가시성: 0~1의 숫자 범위 내에서 개별 단계, 0은 "숨겨짐"을 의미하고 1은 완전히 "표시됨"을 의미합니다. 예: 가시성

9 그림자: 색상, x, y 및 흐림(흐림)에 작용합니다. ) 속성(예: text-shadow

10) 그라데이션: 각 정지점의 위치와 색상이 변경됩니다. 애니메이션을 수행하려면 동일한 유형(방사형 또는 선형)과 동일한 중지 값을 가져야 합니다. 예: background-image

11, 페인트 서버(SVG): 그라디언트에서 그라디언트 및 색상까지 다음 경우만 지원합니다. 색상을 지정하면 작업은 위와 유사합니다

12. 공백으로 구분된 위 목록: 목록에 동일한 항목 값이 있으면 목록의 각 항목이 위 규칙에 따라 변경되고, 그렇지 않으면 아무 것도 없습니다. Change

13. 속기 속성: 약어의 모든 부분을 애니메이션으로 만들 수 있다면 모든 개별 속성 변경처럼 변경됩니다.

전환 효과를 얻을 수 있는 특정 CSS 속성은 무엇인가요? 전환 효과를 얻을 수 있는 모든 CSS 속성 값과 값 유형은 W3C 공식 웹사이트에 나열되어 있습니다. 자세한 내용은 여기를 클릭하세요. 여기서 기억해야 할 점은 모든 속성 변경이 페이지의 적응형 너비와 같은 전환 작업 효과를 트리거하는 것은 아니라는 것입니다. 브라우저가 너비를 변경하면 전환 효과가 트리거되지 않습니다. 그러나 위 표에 표시된 속성 유형을 변경하면 전환 작업 효과가 트리거됩니다.

코드 예:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php中文网.com/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
  transition-property:width;
  -moz-transition-property:width;
  -webkit-transition-property:width;
  -o-transition-property:width;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

위 코드에서 설정한 전환 속성은 너비입니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<style> 
#thediv{
  width:100px;
  height:100px;
  background:blue;
   
  transition-property:width,height;
  -moz-transition-property:width,height;
  -webkit-transition-property:width,height;
  -o-transition-property:width,height;
   
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

위 코드는 쉼표로 구분된 두 속성의 전환 효과를 설정할 수 있습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition-property:width,height; -moz-transition-property:width,height; -webkit-transition-property:width,height; -o-transition-property:width,height; transition-duration:2s; -moz-transition-duration:2s; -webkit-transition-duration:2s; -o-transition-duration:2s; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

제출하다 코드 재설정

자동운전