css动画改变颜色 |css半透明图片背景

// 示例1：使用transition
transition: background-color 1s;
// 示例2：使用animation
@keyframes colorChange {
from { background-color: #fff; }
to { background-color: #ff0000; }
}
animation-name: colorChange;
animation-duration: 2s;
animation-timing-function: ease-in-out;

示例1中大家使用了CSS过渡（transition）来实现改变背景颜色的动画效果。大家设置了过渡属性（background-color）以及过渡时间（1秒），当大家的鼠标悬停在该元素上时，背景颜色会慢慢地从之前的颜色过渡到新的颜色。

示例2中大家使用了CSS动画（animation）来实现改变背景颜色的动画效果。大家先定义了动画的关键帧，从白色过渡到红色，然后大家给元素添加了该动画。动画名称、动画持续时间以及动画时间函数都进行了设置，类似于示例1，当大家的鼠标悬停在该元素上时，背景颜色会持续地从之前的颜色过渡到新的颜色。

以上两个示例都是实现改变背景颜色的动画效果，其他元素的颜色改变同样可以使用这些方法来实现。只需要将背景颜色改为所需的元素颜色即可。