当前位置：首页 > JavaScript

js实现流光

2026-03-02 06:50:34JavaScript

流光效果实现方法

流光效果通常指元素表面出现流动的光线或高光效果，可以通过CSS动画和JavaScript结合实现。以下是几种常见实现方式：

CSS动画配合JavaScript控制

通过CSS定义动画关键帧，JavaScript控制动画触发时机：

js实现流光

/* 定义流光动画 */
@keyframes lightFlow {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.flow-light {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  background-size: 200% 100%;
  animation: lightFlow 2s linear infinite;
}

// 添加流光类名
document.getElementById('target').classList.add('flow-light');

Canvas动态绘制

使用Canvas实现更灵活的流光效果：

js实现流光

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

let pos = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 创建渐变
  const gradient = ctx.createLinearGradient(pos, 0, pos+100, 0);
  gradient.addColorStop(0, 'transparent');
  gradient.addColorStop(0.5, 'rgba(255,255,255,0.8)');
  gradient.addColorStop(1, 'transparent');

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  pos = (pos + 2) % canvas.width;
  requestAnimationFrame(animate);
}
animate();

SVG滤镜实现

利用SVG滤镜创建高级流光效果：

<svg width="0" height="0">
  <filter id="lightFlow">
    <feGaussianBlur stdDeviation="3" result="blur"/>
    <feComposite operator="out" in="SourceGraphic" in2="blur"/>
    <feDisplacementMap scale="10" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

<script>
  document.getElementById('target').style.filter = "url(#lightFlow)";
</script>

WebGL高性能实现

对于复杂场景可使用Three.js等库：

import * as THREE from 'three';

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.PlaneGeometry();
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0 }
  },
  vertexShader: `...`, // 自定义着色器
  fragmentShader: `...` // 包含流光计算逻辑
});

function animate() {
  material.uniforms.time.value += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}