[分享]css3折线上切动画

CSS3折线上切动画是一种非常酷炫的效果，可以用于网页设计中，增加页面的视觉效果和用户的交互体验，下面我们来一起看看如何实现这一效果。.line { : relative; width: 100; h...

CSS3折线上切动画是一种非常酷炫的效果，可以用于网页设计中，增加页面的视觉效果和用户的交互体验，下面我们来一起看看如何实现这一效果。

.line {
  position: relative;
  width: 100%;
  height: 30px;
  margin: 40px auto;
  background-color: #f5f5f5;
}

.line:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: #dcdcdc;
  transform: translateY(-50%);
}

.line:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 50%;
  height: 2px;
  background-color: #f94d4d;
  transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.line:hover:after {
  width: 100%;
} 

首先，我们需要创建一个带有背景颜色的div，这就是我们要做动画的那条折线。接着，使用:before伪元素来创建一条灰色的线，作为底线。然后，使用:after伪元素来创建一条红色的线，作为动画线。

在:after伪元素中，我们使用了transition属性，来指定动画效果，这里是一个渐变过渡效果，持续时间为0.3秒，缓动函数为cubic-bezier(0.165, 0.84, 0.44, 1)，也就是贝塞尔曲线。

最后，我们在line:hover:after中，将红色动画线的宽度从原来的50%改变为100%。这样，我们就完成了CSS3折线上切动画。