<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 15px;
border: 1px solid red;
border-radius: 7.5px;
margin: auto;
padding: 1px;
}
.box .box_in{
width: 50%;
height: 100%;
background-color: red;
/* 谁做过渡就给谁加 */
transition: all 2s;
}
.box .box_in:hover{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="box_in"></div>
</div>
</body>
</html>
CSS3 전환(강조) 전환을 만드는 사람은 전환 애니메이션을 추가합니다 . 이는 한 상태에서 다른 상태로의 점진적인 전환으로 페이지를 더 보기 좋고 더 동적으로 만들 수 있습니다. 비록 낮은 버전의 브라우저에서는 지원하지 않지만(ie9 이하) 페이지 레이아웃에 영향을 주지 않습니다.
전환 애니메이션은 종종 :hover와 함께 사용 됩니다.
transition: 전환할 속성이 모션 커브를 시작하는데 시간이 걸리는 경우
1. Attribute: css 속성에서 변경하려는 경우 너비, 높이, 배경색, 여백 모두 OK입니다. 모든 속성을 변경하고 전환하려면 all을 작성할 수 있습니다.
transition: all 1s;
2、花费时间:单位是秒(必须写单位)比如0.5s
3. 동작 곡선: 기본값은 부드럽게(생략 가능)
transition: width .5s ;
4. 시작 시기: 단위는 초(단위는 반드시 기재), 지연 트리거 시간 설정 가능, 기본값은 0초(생략 가능)
transition: width .5s ease 1s;
'
'