代码忍者
探索前端技术的无限可能
向下滚动
代码示例
Flex布局实现垂直居中
CSS.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.content {
/* 内容样式 */
padding: 2rem;
background: #fff;
}
使用Flexbox实现内容的垂直和水平居中,适用于任何尺寸的容器和内容。
Promise异步处理
JavaScriptasync function fetchUserData() {
try {
const response = await fetch('/api/user');
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}
使用async/await优雅地处理异步请求,使代码更易读和维护。
动画效果
CSS@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animated {
animation: slideIn 0.5s ease;
使用CSS关键帧动画创建平滑的滑入效果。