如何做一个平滑的变换比例 - CSS

在CSS中，你可以使用transition属性来实现平滑的变换比例。该属性定义了在元素状态改变时如何过渡到新状态的方式。

语法

transition: property duration timing-function delay;

• property：指定应用过渡的CSS属性名称。可以是单个属性名称，也可以使用all关键字表示所有属性。多个属性可以用逗号分隔。
• duration：指定过渡的时间（以秒或毫秒为单位）。
• timing-function：可选，指定过渡的时间函数。它定义了过渡如何进行。常用的时间函数包括linear、ease、ease-in、ease-out、ease-in-out等。
• delay：可选，指定过渡开始前的延迟时间。

示例

以下示例将使一个 div 元素在鼠标经过时在1秒内逐渐变成红色，并在鼠标离开时在1秒内逐渐变为蓝色：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: background-color 1s;
}

div:hover {
  background-color: red;
}

多个属性过渡

使用逗号分隔多个属性可以将它们的过渡效果合并为一个：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  transition: background-color 1s, color 1.5s;
}

div:hover {
  background-color: red;
  color: black;
}

总结

使用transition属性可以为元素的状态过渡添加平滑的效果，因此你可以通过设置不同的属性和时长来制作简单但华丽的动画效果。