CSS3 전환 전환

SS3의 전환 속성에 대한 자세한 설명:
이 장에서는 애니메이션과 관련된 속성이기도 한 전환 속성의 사용법을 소개합니다.
1. 기본 지식:
전환은 중국어로 번역하면 "전환"을 의미하며, 이는 요소의 CSS 속성 값이 일정 기간 내에 원활하게 전환될 수 있음을 의미합니다.
이 속성은 테두리, 배경 및 기타 속성과 같은 복합 속성입니다.
문법 구조:

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

매개변수 설명:
1.transition-property: 전환에 참여하는 속성을 설정하거나 검색합니다.
2.transition-duration: 객체 전환 기간을 검색하거나 설정합니다.
3.transition-timing-function: 개체에서 애니메이션 전환 유형을 검색하거나 설정합니다.
4.transition-delay: 객체 지연 전환 시간을 검색하거나 설정합니다.
코드 예시는 다음과 같습니다.

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

위 코드는 2초 이내에 애니메이션 효과로 div의 너비를 100px에서 500px로 설정하는 방법을 보여줍니다.
복합속성이므로 속성을 별도로 설정하는 것이 당연합니다

지속적인 학습

새로운 파일

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

코드 재설정

자동운전

제출하다

시사 Clear