1. 基本使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
/* 设置哪个属性需要过渡 */
/* transition-property: width,height,background-color; */
/* 让所有能过渡的属性都过渡 */
transition-property: all;
/* 设置过渡时间 */
/* 分别设置 */
/* transition-duration: 1s,1s,1s; */
/* 统一设置 */
transition-duration: 1s;
}
.box1:hover {
width: 400px;
height: 400px;
background-color: green;
transform: rotate(45deg);
box-shadow: 0px 0px 20px black;
opacity: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>2. 高级使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>高级使用</title>
<style>
.outer {
width: 1300px;
height: 900px;
border: 1px solid black;
}
.box {
width: 200px;
height: 100px;
/* 让所有能过渡的属性都过渡 */
transition-property: all;
/* 设置过渡时间 */
transition-duration: 5s;
/* 过渡延迟 */
/* transition-delay: 2s; */
}
.box1 {
background-color: skyblue;
transition-timing-function: ease;
}
.box2 {
background-color: orange;
transition-timing-function: linear;
}
.box3 {
background-color: gray;
transition-timing-function: ease-in;
}
.box4 {
background-color: tomato;
transition-timing-function: ease-out;
}
.box5 {
background-color: green;
transition-timing-function: ease-in-out;
}
.box6 {
background-color: purple;
transition-timing-function: step-start;
}
.box7 {
background-color: deepskyblue;
transition-timing-function: step-end;
}
.box8 {
background-color: chocolate;
transition-timing-function: steps(20, start);
}
.box9 {
background-color: rgb(18, 78, 34);
transition-timing-function: cubic-bezier(1, .35, .78, 1.24);
}
.outer:hover .box {
width: 1300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">ease（慢，快，慢）</div>
<div class="box box2">linear（匀速）</div>
<div class="box box3">ease-in（先慢再快）</div>
<div class="box box4">ease-out（先快再慢）</div>
<div class="box box5">ease-in-out（先慢再快再慢）</div>
<div class="box box6">step-start（不考虑过渡的时间，直接到终点）</div>
<div class="box box7">step-end（考虑过渡的时间，时间到了之后直接到终点）</div>
<div class="box box8">steps（分步过渡）</div>
<div class="box box9">贝塞尔曲线</div>
</div>
</body>
</html>3. 过渡复合属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡复合属性</title>
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
background-color: orange;
transition: 2.5s all linear;
}
.outer:hover .inner {
width: 1000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
评论 (0)