虚线边框实现边缘循环滚动css

要实现边缘循环滚动，可以使用 CSS 动画和伪元素的组合来实现。以下是一个简单的示例：

HTML 代码：

<div class="wrapper">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

CSS 代码：

.wrapper {
  width: 300px;
  height: 200px;
  border: 1px dashed #ccc;
  overflow: hidden;
  position: relative;
}

ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 500%;
  margin: 0;
  padding: 0;
  animation: scroll 10s linear infinite;
}

li {
  display: inline-block;
  width: 20%;
  text-align: center;
}

li:first-child {
  margin-left: 0;
}

li:last-child {
  margin-right: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-80%);
  }
}

.wrapper::before,
.wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
  z-index: 1;
}

.wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

解释：

1. `.wrapper` 设置了容器的宽度、高度、边框样式为虚线，以及相对定位和隐藏溢出部分的内容。

2. `ul` 设置了绝对定位，宽度为 `500%`，并使用动画 `scroll`，使其在 `10s` 内水平移动 `-80%` 的距离，即循环滚动。

3. `li` 设置了 `display: inline-block`，并设置宽度为 `20%`，使 5 个 li 平分 ul 的宽度。

4. `li:first-child` 和 `li:last-child` 分别去掉第一个和最后一个 li 的左右 margin，以保证内容之间无缝衔接。

5. `@keyframes scroll` 设置了动画的关键帧，在 `0%` 处和 `100%` 处分别设置了 `transform: translateX(0)` 和 `transform: translateX(-80%)`，使 ul 在水平方向上循环滚动。

6. `.wrapper::before` 和 `.wrapper::after` 使用伪元素实现两侧的边缘虚线边框。这里使用了 `linear-gradient` 渐变色来实现从透明到白色的过渡效果，使边缘看起来更自然。