实现鼠标移入 盒子背景颜色从左往右 缓慢发送变化 从没有颜色改变为#ddd
时间: 2024-02-27 22:59:09 浏览: 181
可以使用CSS3的transition和linear-gradient属性来实现这个效果。具体步骤如下:
1. 设置盒子的初始背景色为没有颜色,即background-color: transparent;
2. 设置盒子的背景渐变色为从左到右的线性渐变色,即background-image: linear-gradient(to right, #ddd, #ddd);
3. 设置盒子的过渡效果为0.5秒,即transition: background-color 0.5s;
4. 当鼠标移入盒子时,将盒子的背景颜色设置为渐变色,即background-color: linear-gradient(to right, #ddd, #ddd);
完整的CSS代码如下:
```
.box {
width: 200px;
height: 200px;
background-color: transparent;
background-image: linear-gradient(to right, #ddd, #ddd);
transition: background-color 0.5s;
}
.box:hover {
background-color: linear-gradient(to right, #ddd, #ddd);
}
```
这样就可以实现鼠标移入盒子时,背景颜色从左往右缓慢渐变为#ddd的效果了。
阅读全文