css为hover添加过度

CSS中添加过度效果非常简单,只需要在:hover伪类后面添加transition属性即可。

 
p {
  background-color: #eee;
  transition: background-color 1s;
}

p:hover {
  background-color: #ccc;
}

css为hover添加过度

在上面的代码中,当鼠标悬停在段落上时,背景颜色会从灰色变成深灰色,持续时间为1秒。transition属性需要指定过度的属性和持续时间,可以同时过度多个属性

需要注意的是,即使不添加过度效果,hover伪类也会导致某些元素的样式发生变化。所以在编写CSS时,需要特别关注鼠标悬停状态下元素的样式。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效