css 用过渡实现,鼠标离开li时,背景色缓慢消息的样式

要实现鼠标悬停时背景颜色变为黄色,鼠标离开时背景颜色慢慢消失并变回白色的效果,
可以使用CSS的过渡(transition)属性

li {
  background: #fff;
  color: #000;
  transition: background 0.5s ease-out;
}

li:hover {
  background: #fbb31e;
  color: #fff;
}

li:not(:hover) {
  transition: background 0.5s linear;
}

为li元素设置了一个初始的白色背景,并定义了一个过渡效果,过渡时间为0.5秒,并使用了ease-out的缓动函数使过渡效果更加平滑。
当鼠标悬停在li元素上时,背景颜色会立即变为黄色,文字颜色变为白色。
当鼠标离开时,背景颜色会平滑地过渡回原来的白色。

这里使用了:not(:hover)伪类选择器来选择非悬停状态的li元素,并为它们定义了一个新的过渡效果,过渡时间为0.5秒,并使用了linear的缓动函数,使背景颜色慢慢消失并变回白色

你可能感兴趣的:(css,前端)