height: 6px;
background: linear-gradient(-90deg,
#7B5A39 1%, transparent 24%, #FFD03B 25%, #7B5A39 40%, #7B5A39 50%,
#7B5A39 50%, transparent 74%, #FFD03B 75%, #7B5A39 90%, #7B5A39 100%);
background-size: 200% 100%;
/* 指定使用Gradient动画，5s完成一次动画，匀速，无限循环 */
.gradient {
animation: Gradient 5s linear infinite;
-webkit-animation: Gradient 5s linear infinite;
-moz-animation: Gradient 5s linear infinite;
/* 定义Gradient动画效果：初始时显示最右端，结束时显示最左端（向右滚动） */
@keyframes Gradient {
background-position: 100% 100%;
100% {
background-position: 0% 100%;
/* 兼容写法.. */
@-webkit-keyframes Gradient {
background-position: 100% 100%;
100% {
background-position: 0% 100%;
/* 兼容写法.. */
@-moz-keyframes Gradient {
background-position: 100% 100%;
100% {
background-position: 0% 100%;
/* .right-top {
transform: rotate(90deg);
</style>
* 定义Gradient动画效果：初始时显示最右端，结束时显示最左端（向右滚动） *//* 渐变流光效果线条，要将横向宽度设置为超过100%的值，否则无动画效果 *//* 指定使用Gradient动画，5s完成一次动画，匀速，无限循环 */新人工作时，查找资料自学使用。/* 兼容写法.. *//* 兼容写法.. */
实现
流动
线条
效果可以使用
HTML5
Canvas 和 JavaScript，其中 Node.js 可以作为后端技术进行支持，但主要实现还是在前端。下面是一个简单的实现
流动
线条
效果的示例代码：
HTML
：
```
html
<canvas id="canvas"></canvas>
JavaScript：
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const lineWidth = 10;
const lineDistance = 20;
const lineSpeed = 2;
const lineColor = '#FFFFFF';
let pos = 0;
function draw() {
ctx.clearRect(0, 0, width, height);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = lineColor;
ctx.beginPath();
for (let i = -lineDistance; i <= width + lineDistance; i += lineDistance) {
const y = height / 2 + Math.sin((pos + i) / 100) * 50;
ctx.moveTo(i, y);
ctx.lineTo(i + lineDistance, y);
ctx.stroke();
pos += lineSpeed;
requestAnimationFrame(draw);
draw();
这段代码会在 Canvas 上绘制一组水平的
线条
，并且每个
线条
都会上下波动。`lineWidth`、`lineDistance` 和 `lineColor` 用于控制
线条
的宽度、间距和颜色。`lineSpeed` 控制
线条
的移动速度，`pos`
记录
当前的位置，每次 `requestAnimationFrame` 时更新。
