Question

你好，我有这个 div 和 linear-gradient()。

悬停时，div 需要 2 秒才能扩展到 200 像素宽度并显示蓝色和绿色到linear-gradient()。

但是蓝色和绿色会立即添加，而扩展需要 2 秒。

有人知道答案吗。

这是我的代码。

div {
  background-image: linear-gradient( to right, red, yellow);
  background-color: red;
  width: 100px;
  border: 2px solid black;
  border-radius: 5px;
  transition: 1s;
}
div:hover {
  width: 200px;
  background-image: linear-gradient( to right, red, yellow, blue, green);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div>hello world</div>
</body>
</html>

另外，我希望先出现蓝色，然后出现绿色。

Answer 1

你不需要改变背景图片，只要让它成为最终的大小，让不断增长的div或多或少地显示它

div {
  background-image: linear-gradient( to right, red, yellow 100px, blue, green);
  background-color: red;
  background-size: 200px;
  width: 100px;
  border: 2px solid black;
  border-radius: 5px;
  transition: 1s;
}
div:hover {
  width: 200px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div>hello world</div>
</body>
</html>

Answer 2

您可以使用背景大小进行过渡 linear-gradient，因为 linear-gradient 无法过渡。

div {
  background-image: linear-gradient( to right, red, yellow, blue, green);
  background-color: red;
  width: 100px;
  border: 2px solid black;
  border-radius: 5px;
  transition: 1s;
  background-size: 200% 200%;
}
div:hover {
  width: 200px;
  background-size:100% 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <div>hello world</div>
</body>
</html>

过渡 2s 不适用于线性渐变（）

2 个答案: