作为前端开发者，我们经常遇到一些看似简单却让人头疼的问题。今天分享 3 个实用技巧，直接上代码，复制就能用！

## 技巧一：纯 CSS 实现图片懒加载动画

图片加载时显示占位动画，提升用户体验：

“`css
.lazy-image {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 8px;
}

.lazy-image.loaded {
background: none;
animation: none;
}

@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
“`

“`javascript
// 图片加载完成后移除动画
document.querySelectorAll(‘.lazy-image’).forEach(img => {
img.onload = () => img.classList.add(‘loaded’);
});
“`

**效果**：加载时显示流动的灰色条纹，加载完成自动消失。

## 技巧二：一键复制文本到剪贴板

博客文章中的代码块经常需要复制功能：

“`javascript
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
showToast(‘✅ 已复制到剪贴板’);
} catch (err) {
const textarea = document.createElement(‘textarea’);
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand(‘copy’);
document.body.removeChild(textarea);
showToast(‘✅ 复制成功’);
}
}

function showToast(message) {
const toast = document.createElement(‘div’);
toast.className = ‘toast’;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 2000);
}
“`

“`css
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 10px 20px;
border-radius: 4px;
z-index: 9999;
}
“`

**使用场景**：代码演示、引用文本、链接复制等。

## 技巧三：滚动时导航栏渐变透明

页面滚动时导航栏从透明渐变到实心：

“`css
.navbar {
position: fixed;
top: 0;
width: 100%;
transition: background-color 0.3s ease;
backdrop-filter: blur(10px);
}

.navbar.scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
“`

“`javascript
window.addEventListener(‘scroll’, () => {
const navbar = document.querySelector(‘.navbar’);
if (window.scrollY > 50) {
navbar.classList.add(‘scrolled’);
} else {
navbar.classList.remove(‘scrolled’);
}
});
“`

**进阶玩法**：根据滚动距离动态调整透明度：

“`javascript
window.addEventListener(‘scroll’, () => {
const navbar = document.querySelector(‘.navbar’);
const opacity = Math.min(window.scrollY / 200, 1);
navbar.style.backgroundColor = `rgba(255, 255, 255, )`;
});
“`

## 实战建议

1. **性能优先**：避免在 scroll 事件中执行复杂计算，可使用 requestAnimationFrame 优化
2. **渐进增强**：先确保基础功能可用，再添加动画效果
3. **移动端适配**：记得测试触摸设备的滚动行为

## 结语

前端开发的魅力在于细节。这些技巧看似简单，但能显著提升用户体验。建议收藏本文，下次遇到类似需求直接套用代码！

**互动话题**：你有哪些私藏的前端技巧？欢迎在评论区分享！

—

*关注本站，获取更多建站技术和前端开发实战教程。*