当前位置：首页 > JavaScript

js实现文字立体效果

2026-04-04 19:52:25JavaScript

使用CSS text-shadow实现立体文字

通过多层text-shadow叠加创造立体感，阴影偏移方向决定光源角度：

.3d-text {
  color: #fff;
  text-shadow: 
    1px 1px 0 #999,
    2px 2px 0 #888,
    3px 3px 0 #777,
    4px 4px 0 #666;
}

使用Canvas绘制3D文字

通过逐像素偏移和颜色渐变模拟立体效果：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function draw3DText(text, x, y) {
  ctx.font = 'bold 60px Arial';
  const depth = 5;

  for(let i = depth; i>0; i--) {
    ctx.fillStyle = `rgba(0,0,0,${i/depth*0.6})`;
    ctx.fillText(text, x+i, y+i);
  }

  ctx.fillStyle = '#ff0000';
  ctx.fillText(text, x, y);
}

SVG滤镜实现立体效果

利用SVG的feGaussianBlur和feOffset滤镜组合：

<svg width="0" height="0">
  <filter id="3d-effect">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
    <feOffset dx="4" dy="4" result="offsetblur"/>
    <feComposite in="SourceGraphic" in2="offsetblur" operator="over"/>
  </filter>
</svg>

<div style="filter: url(#3d-effect); font-size: 48px;">
  立体文字
</div>

WebGL三维文字渲染

使用Three.js库创建真实3D文字：

import * as THREE from 'three';

const scene = new THREE.Scene();
const fontLoader = new THREE.FontLoader();

fontLoader.load('fonts/helvetiker_regular.typeface.json', (font) => {
  const geometry = new THREE.TextGeometry('3D Text', {
    font: font,
    size: 5,
    height: 2,
    curveSegments: 12
  });

  const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
  const textMesh = new THREE.Mesh(geometry, material);
  scene.add(textMesh);
});

CSS transform实现伪3D效果

通过skew和rotate变换模拟透视：

js实现文字立体效果

.pseudo-3d {
  display: inline-block;
  transform: 
    rotateY(20deg) 
    skewY(-5deg);
  transition: transform 0.3s;
  color: #3498db;
  font-weight: bold;
}

.pseudo-3d:hover {
  transform: rotateY(30deg) skewY(-8deg);
}