hover时背景从内向外辐射改变css

最新推荐文章于 2024-08-05 11:08:15 发布

十一/shell

最新推荐文章于 2024-08-05 11:08:15 发布

阅读量794

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： css css背景辐射改变 hover改变背景

本文链接：https://blog.youkuaiyun.com/weixin_40126227/article/details/78973983

前端开发专栏收录该内容

27 篇文章

订阅专栏

这篇博客介绍了如何使用CSS实现一个hover效果，当鼠标悬停在元素上时，背景从内向外逐渐辐射改变。通过在`:before`伪元素上应用过渡效果和变换，实现了背景颜色的平滑扩展，创建了一个吸引人的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//原样式
li {
  float: left;
  width: 250px;
  background: #fff;
  margin-left: 2px;
  margin-bottom: 2px;
  height: 140px;
  position: relative;
  overflow: hidden;
}
li:before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 251px;
  height: 140px;
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -70px;
  opacity: 0;
  -webkit-transition: .5s cubic-bezier(.3, 0, 0, 1.3);
  -moz-transition: .5s cubic-bezier(.3, 0, 0, 1.3);
  -ms-transition: .5s cubic-bezier(.3, 0, 0, 1.3);
  -o-transition: .5s cubic-bezier(.3, 0, 0, 1.3);
  transition: .5s cubic-bezier(.3, 0, 0, 1.3);
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  background-color: #83c325;
}

//hover样式通过:before放大来实现背景从内向外辐射改变
li:hover:before {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}