前端的 transition 属性可以用来创建各种CSS动画效果。它可以用来平滑地过渡元素的属性变化，比如颜色、尺寸、位置、透明度等。
1. 颜色过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.color-transition {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.color-transition:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="color-transition"></div>
</body>
</html>
2. 尺寸过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.size-transition {
width: 100px;
height: 100px;
background-color: green;
transition: width 0.5s ease, height 0.5s ease;
}
.size-transition:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="size-transition"></div>
</body>
</html>
3. 位置过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.position-transition {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
transition: left 0.5s ease, top 0.5s ease;
}
.position-transition:hover {
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="position-transition"></div>
</body>
</html>
4. 透明度过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.opacity-transition {
width: 100px;
height: 100px;
background-color: purple;
opacity: 1;
transition: opacity 0.5s ease;
}
.opacity-transition:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="opacity-transition"></div>
</body>
</html>
5. 多属性过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.multi-transition {
width: 100px;
height: 100px;
background-color: orange;
opacity: 1;
transform: rotate(0deg);
transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
}
.multi-transition:hover {
width: 200px;
height: 200px;
background-color: pink;
opacity: 0.5;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="multi-transition"></div>
</body>
</html>
6. 延迟过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.delay-transition {
width: 100px;
height: 100px;
background-color: teal;
transition: background-color 0.5s ease 1s;
}
.delay-transition:hover {
background-color: lime;
}
</style>
</head>
<body>
<div class="delay-transition"></div>
</body>
</html>
7. 复杂动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.complex-transition {
width: 100px;
height: 100px;
background-color: coral;
border-radius: 0;
transform: scale(1);
transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease, transform 0.5s ease;
}
.complex-transition:hover {
width: 150px;
height: 150px;
background-color: darkblue;
border-radius: 50%;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="complex-transition"></div>
</body>
</html>
8. 使用 transition 在表单控件上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.input-transition {
width: 200px;
padding: 10px;
border: 2px solid gray;
transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.input-transition:focus {
border-color: blue;
box-shadow: 0 0 10px blue;
}
</style>
</head>
<body>
<input type="text" class="input-transition" placeholder="Focus me!">
</body>
</html>
9. 使用 transition 在导航菜单上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.nav-menu {
list-style: none;
padding: 0;
}
.nav-menu li {
display: inline-block;
margin-right: 20px;
transition: color 0.5s ease, transform 0.5s ease;
}
.nav-menu li:hover {
color: red;
transform: scale(1.2);
}
</style>
</head>
<body>
<ul class="nav-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</body>
</html>
10. 使用 transition 在图片上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition Example</title>
<style>
.image-transition {
width: 300px;
height: 200px;
transition: transform 0.5s ease, filter 0.5s ease;
}
.image-transition:hover {
transform: scale(1.1);
filter: brightness(0.8);
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/300x200" class="image-transition" alt="Placeholder Image">
</body>
</html>
