您的位置 首页 css教程

css如何实现下划线滑动效果

本文主要讲述两种下划线动效效果,第一种悬停时X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左。

实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果。

x轴由内向外展开

05d90f3561df177adfc2def0b0ece12.png

利用贝塞尔曲线利用横线的动画实现,具体代码如下:

ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
ul:hover li:not(:hover) a {
  opacity: 0.2;
}
ul li {
  position: relative;
  padding: 30px 25px 30px 25px;
  cursor: pointer;
}
ul li::after {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #3498db;
  transform: scaleX(0);
  transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
ul li:hover::after, ul li.active::after {
  transform: scaleX(1);
}

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

网站地图