如何在css中滑动线条？

在CSS中创建滑动线条可以通过多种方式实现，这里我将介绍一种常见的方法，即使用CSS动画和伪元素来创建一个简单的滑动线条效果。

基础概念

滑动线条通常是通过CSS动画来实现的，动画可以使元素在页面上移动，从而产生滑动的效果。伪元素（如::before或::after）可以用来创建额外的DOM元素，而不需要在HTML中实际添加新的元素。

类型

基于伪元素的滑动线条：使用CSS伪元素和动画。
SVG滑动线条：使用SVG图形和SMIL动画或CSS动画。
JavaScript控制的滑动线条：通过JavaScript动态改变样式来实现滑动效果。

应用场景

滑动线条常用于进度条、加载指示器、导航菜单指示器等场景。

实现方法

下面是一个基于伪元素的滑动线条的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动线条示例</title>
<style>
  .slider {
    position: relative;
    width: 100%;
    height: 5px;
    background-color: #ddd;
  }

  .slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: #007bff;
    animation: slide 3s linear infinite;
  }

  @keyframes slide {
    to {
      left: 100%;
    }
  }
</style>
</head>
<body>

<div class="slider"></div>

</body>
</html>

解释

.slider 是一个包含滑动线条的容器，设置了相对定位和背景颜色。
.slider::before 是一个伪元素，用来创建滑动线条本身，设置了绝对定位、初始宽度和背景颜色。
@keyframes slide 定义了一个名为 slide 的动画，该动画会使伪元素的 left 属性从 0 变为 100%，从而实现滑动效果。
animation: slide 3s linear infinite; 应用于伪元素，设置了动画名称、持续时间、速度曲线和无限循环。