<!DOCTYPE html>
<html>
<head>
<style>
.dashed-scroll {
width: 300px;
height: 4px;
margin: 50px auto;
background:
repeating-linear-gradient(
to right,
#000 0%,
#000 50%,
transparent 50%,
transparent 100%
);
background-size: 30px 100%;
animation: scroll 1s linear infinite;
}
@keyframes scroll {
from {
background-position: 0 0;
}
to {
background-position: 30px 0;
}
}
/* 其他方向示例 */
.vertical-scroll {
width: 4px;
height: 200px;
background:
repeating-linear-gradient(
to bottom,
#000 0%,
#000 50%,
transparent 50%,
transparent 100%
);
background-size: 100% 30px;
animation: scroll-vertical 1s linear infinite;
}
@keyframes scroll-vertical {
from {
background-position: 0 0;
}
to {
background-position: 0 30px;
}
}
</style>
</head>
<body>
<!-- 水平滚动 -->
<div class="dashed-scroll"></div>
<!-- 垂直滚动 -->
<div class="vertical-scroll"></div>
</body>
</html>
实现原理：
使用 repeating-linear-gradient 创建重复的虚线图案
通过 background-size 控制虚线段的重复间距
使用 CSS 动画改变 background-position 实现滚动效果
关键点说明：
水平滚动：渐变方向为 to right，动画改变 X 轴位置
垂直滚动：渐变方向为 to bottom，动画改变 Y 轴位置
通过调整 background-size 的值可以改变虚线的间隔长度
修改颜色值（#000）可以改变虚线的颜色
调整动画时长（1s）可以改变滚动速度
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
