js实现文字立体效果
使用CSS text-shadow实现立体效果
通过CSS的text-shadow属性可以轻松为文字添加立体效果。多层叠加的阴影能模拟出3D视觉效果。
.emboss-text {
color: #333;
text-shadow:
1px 1px 1px #fff,
2px 2px 1px #666;
}调整阴影的偏移量和颜色可以创建不同风格的立体效果。增加更多阴影层会让效果更明显。
使用Canvas绘制3D文字
Canvas API允许更复杂的3D文字效果实现。通过分层绘制和渐变可以创建更真实的立体感。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function draw3DText(text, x, y) {
// 底部阴影层
ctx.fillStyle = 'rgba(0,0,0,0.3)';
for(let i = 0; i < 10; i++) {
ctx.fillText(text, x + i, y + i);
}
// 文字主体
ctx.fillStyle = '#ff0000';
ctx.fillText(text, x, y);
}SVG滤镜创建立体效果
SVG滤镜能创建高质量的立体文字效果，支持各种光照和材质效果。
<svg width="400" height="100">
<defs>
<filter id="3d-effect" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feSpecularLighting surfaceScale="5" specularConstant="1" result="spec">
<fePointLight x="100" y="100" z="50"/>
</feSpecularLighting>
<feComposite in="spec" in2="SourceGraphic" operator="in"/>
</filter>
</defs>
<text x="20" y="50" font-size="36" filter="url(#3d-effect)">3D Text</text>
</svg>WebGL实现高级3D文字
对于需要高性能3D文字的场景，可以使用Three.js等WebGL库。
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const geometry = new THREE.TextGeometry('3D Text', {
size: 0.5,
height: 0.2,
curveSegments: 12
});
const material = new THREE.MeshPhongMaterial({color: 0x00ff00});
const textMesh = new THREE.Mesh(geometry, material);
scene.add(textMesh);
// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, 1);
scene.add(light);使用CSS transform模拟3D
CSS 3D变换可以创建简单的立体文字效果，无需JavaScript。
.perspective-text {
transform: perspective(300px) rotateX(20deg);
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}结合动画可以创建更生动的效果。这种方法性能较好，适合移动设备。
