linear-gradient() 渐变背景色怎么加css3 过渡效果
时间: 2023-11-24 07:08:22 浏览: 66
要给 `linear-gradient()` 渐变背景色添加 CSS3 过渡效果,可以使用 CSS3 的 `transition` 属性。具体的做法是:
1. 首先定义要使用渐变背景色的元素,并设置其初始的渐变背景色。
```css
.background {
background: linear-gradient(to right, red, yellow);
}
```
2. 接着,设置 `transition` 属性,指定要过渡的 CSS 属性和过渡时间。
```css
.background {
background: linear-gradient(to right, red, yellow);
transition: background 0.5s ease;
}
```
这里我们指定了要过渡的属性是 `background` ,时间为 `0.5s`,过渡方式为 `ease`。
3. 最后,在鼠标悬浮在元素上时,修改渐变背景色即可触发过渡效果。
```css
.background:hover {
background: linear-gradient(to right, blue, green);
}
```
完整的代码如下:
```css
.background {
background: linear-gradient(to right, red, yellow);
transition: background 0.5s ease;
}
.background:hover {
background: linear-gradient(to right, blue, green);
}
```