如何使用 CSS 在元素上创建多个过渡效果?
使用 CSS 在元素上创建多个过渡效果是提升网站趣味性和互动性的绝佳方法。通过合并各种过渡效果，我们可以为用户打造动态且引人入胜的体验。本文将介绍如何使用 CSS 在元素上创建多个过渡效果的基础知识。
层叠样式表 (CSS) 是用于设计网页样式的强大工具。其最实用的功能之一是能够在元素的不同状态(例如鼠标悬停或点击元素时)之间创建流畅且视觉上引人入胜的过渡效果。
什么是 CSS 过渡效果?
在了解如何创建多个过渡效果之前，我们先来了解一下什么是 CSS 过渡效果。过渡效果是指元素两种状态之间的渐变。例如，当我们将鼠标悬停在按钮上时，其背景颜色会逐渐从一种颜色变为另一种颜色。 CSS 允许我们指定这些过渡的持续时间和时间，以及正在过渡的属性。
过渡
css-selector{
transition: property duration timing-function delay;
}
CSS 中的过渡属性
我们可以在 CSS 中使用的过渡属性包括:
transition-property - 此属性指定应过渡的 CSS 属性。
transition-duration - 此属性指定过渡的持续时间(以秒或毫秒为单位)。默认情况下，过渡持续时间为 0，即不应用过渡效果。
transition-timing-function − 此属性控制过渡的速度和时间。
transition-delay − 此属性指定过渡开始前的延迟时间。
创建基本过渡
要创建过渡，我们需要指定要设置动画的属性，例如过渡持续时间、时间函数和延迟时间。例如，要创建按钮宽度的过渡，我们可以使用以下代码 −
button {
transition: width 0.5s ease-in-out;
}
以上代码使用 ease-in-out 定时函数指定按钮的宽度将在 0.5 秒内过渡。
创建多个过渡效果
要在元素上创建多个过渡效果，我们需要在 CSS 代码中添加其他过渡效果。例如，要创建一个同时过渡 width 和 background-color 属性的按钮，我们可以使用以下代码 -
button {
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
以上代码使用 ease-in-out 定时函数指定按钮的 width 和 background-color 属性将在 0.5 秒内过渡。
以下是一些完整的代码示例，演示如何使用 CSS 在元素上创建多个过渡效果 -
示例 1
在此示例中，我们将创建一个同时过渡 width 和 background-color 属性的按钮。但是，我们将为每个过渡效果使用不同的持续时间，以创建交错效果。
<html>
<head>
<style>
body{
text-align: center;
}
button {
margin: auto;
width: 100px;
height: 50px;
background-color: green;
border: none;
color: #fff;
font-size: 16px;
padding: 10px 20px;
transition: width 0.5s ease-in, background-color 1s ease-out;
}
button:hover {
width: 150px;
background-color: red;
}
</style>
</head>
<body>
<h3>Multiple Transitions with Different Durations</h3>
<button>Hover Me</button>
</body>
</html>
在上面的例子中，我们设置按钮的宽度为 100px，背景色为绿色。然后，我们设置 transition 属性，使宽度和背景色都发生过渡。但是，宽度过渡的持续时间为 0.5 秒，背景色过渡的持续时间为 1 秒。这会产生一种交错效果，按钮宽度的过渡速度比背景色的过渡速度快。当鼠标悬停在按钮上时，宽度会扩展至 150px，背景色将变为红色。
示例 2
在本例中，我们将创建一个同时过渡背景色和边框半径属性的框。但是，我们将对边框半径的过渡使用延迟。
<html>
<head>
<style>
body{
text-align: center;
}
.box {
margin: auto;
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
transition: background-color 0.5s ease-in-out, border-radius
0.5s ease-in-out 0.5s;
}
.box:hover {
background-color: blue;
border-radius: 0;
}
</style>
</head>
<body>
<h3>Multiple Transitions with Delays</h3>
<div> Hover over the below circle to see multiple transitions</div>
<div class="box"></div>
</body>
</html>
在上面的例子中，我们将盒子的宽度和高度设置为 200px，并将背景颜色设置为红色。然后，我们设置了 transition 属性，使背景颜色和边框半径属性都发生过渡。但是，我们对边框半径的过渡设置了 0.5 秒的延迟。这意味着背景颜色将立即过渡，而边框半径将等待 0.5 秒后才过渡。当鼠标悬停在盒子上时，背景颜色将变为蓝色，边框半径将变为 0，从而创建一个正方形。
示例 3
在这里，我们将创建一个按钮，使宽度和颜色属性都发生过渡。但是，我们将为每个过渡使用不同的计时函数，以创建独特的效果。
<html>
<head>
<style>
body{
text-align: center;
}
button {
margin: auto;
width: 120px;
height: 60px;
background-color: blue;
border: none;
color: red;
font-size: 18px;
padding: 10px 20px;
transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
color 1s ease-in-out;
}
button:hover {
width: 180px;
color: #fff;
}
</style>
</head>
<body>
<h3>Multiple Transitions with Different Timing Functions</h3>
<button>Hover Me</button>
</body>
</html>
在上面的例子中，我们将按钮的宽度设置为 120px，背景色设置为蓝色，然后设置 transition 属性来同时过渡宽度和颜色属性。但是，我们为每个过渡使用了不同的计时函数。宽度过渡使用了自定义的 cubic-bezier 函数。当鼠标悬停在按钮上时，宽度会扩展至 180px，文本颜色也会从红色变为白色。
结论
CSS 过渡是创建流畅且视觉上有吸引力的网页效果的强大工具。通过使用 transition 属性，我们可以指定持续时间、计时函数以及要过渡的属性。我们还可以通过在 transition 属性中指定多个属性，在一个元素上创建多个过渡。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
