页面技巧
CSS 动画与过渡
使用 CSS 动画和过渡效果，为页面增添活力和流畅的用户体验。
Transition 过渡
transition-property - 指定过渡的属性
transition-duration - 过渡持续时间
transition-timing-function - 过渡速度曲线
transition-delay - 过渡延迟时间
过渡效果示例（鼠标悬停查看效果）
悬停时：宽度变化 + 背景色变化 + 圆角变化
.element {
transition: all 0.3s ease;
}
.element:hover {
width: 200px;
background: #764ba2;
border-radius: 50%;
}
Animation 动画
@keyframes - 定义动画关键帧
animation-name - 动画名称
animation-duration - 动画时长
animation-iteration-count - 播放次数（infinite 为无限）
animation-direction - 播放方向（normal/alternate）
弹跳动画示例
使用 @keyframes 实现的无限弹跳动画
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.element {
animation: bounce 2s infinite;
}
Transform 变换
translate(x, y) - 平移变换
rotate(deg) - 旋转变换
scale(x, y) - 缩放变换
skew(x, y) - 倾斜变换
.card {
perspective: 1000px;
}
.card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
主题切换实现
使用 CSS 变量实现亮色/暗色主题切换，提升用户体验。
CSS 变量基础
定义变量：--variable-name: value;
使用变量：var(--variable-name)
默认值：var(--variable-name, default-value)
作用域：:root 为全局，选择器内为局部
主题切换示例（点击按钮切换）
当前主题：亮色
这是一个主题演示区域，点击按钮可以切换主题。
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #eeeeee;
}
.dark-theme {
--bg-color: #2d3748;
--text-color: #ffffff;
--border-color: #4a5568;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
function toggleTheme() {
document.body.classList.toggle('dark-theme');
localStorage.setItem('theme',
document.body.classList.contains('dark-theme')
? 'dark'
: 'light'
);
}
主题切换最佳实践
使用 localStorage 保存用户偏好
页面加载时读取保存的主题
提供明显的切换按钮和视觉反馈
确保所有组件都支持主题切换
交互效果实现
通过 CSS 和 JavaScript 结合实现丰富的页面交互效果。
鼠标交互
hover - 鼠标悬停效果
active - 鼠标按下效果
focus - 元素获得焦点
cursor - 鼠标指针样式
滚动效果
scroll 事件监听 - 检测滚动位置
视差滚动 - 不同速度滚动产生深度感
滚动动画触发 - 元素进入视口时触发动画
无限滚动 - 滚动到底部自动加载更多内容
window.addEventListener('scroll', function() {
const scrollTop = document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const progress = (scrollTop / scrollHeight) * 100;
progressBar.style.width = progress + '%';
});
表单交互
输入验证反馈 - 实时验证输入内容
焦点状态设计 - 清晰的焦点指示器
错误提示样式 - 醒目的错误信息展示
提交按钮状态 - 禁用、加载、成功状态
input {
border: 2px solid #e2e8f0;
transition: border-color 0.3s;
}
input:focus {
outline: none;
border-color: #667eea;
}
input:invalid {
border-color: #f56565;
}
input:valid {
border-color: #48bb78;
}
色彩搭配技巧
合理的色彩搭配能够提升页面的视觉效果和用户体验。
色彩理论基础
色相（Hue） - 颜色的基本属性
饱和度（Saturation） - 颜色的纯度
明度（Brightness） - 颜色的明暗程度
常用配色方案
#667eea
主色
#764ba2
辅色
#48bb78
成功
#ed8936
警告
#f56565
错误
#4a5568
中性
配色方案类型
单色配色 - 同一色相不同明度/饱和度
互补配色 - 色相环上相对的颜色
三角配色 - 色相环上等距的三种颜色
分裂互补 - 主色 + 互补色两侧的颜色
渐变与阴影
linear-gradient - 线性渐变
radial-gradient - 径向渐变
box-shadow - 盒阴影效果
text-shadow - 文字阴影效果
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
性能优化技巧
优化页面性能，提升加载速度和用户体验。
CSS 优化
选择器性能 - 避免过度嵌套的选择器
避免布局抖动 - 设置明确的宽高
GPU 加速动画 - 使用 transform 和 opacity
关键 CSS 提取 - 首屏样式内联
.animated-element {
will-change: transform, opacity;
transform: translateZ(0);
}
.bad {
div ul li a span { ... }
}
.good {
.link-text { ... }
}
资源优化
图片格式选择 - WebP > PNG/JPG > GIF
字体加载优化 - font-display: swap
懒加载实现 - loading="lazy"
缓存策略 - 合理设置 Cache-Control
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
<img src="image.jpg"
loading="lazy"
alt="描述">
浏览器兼容性
浏览器前缀 - -webkit-, -moz-, -ms-
Feature Query - @supports 检测支持
渐进增强 - 基础功能优先，高级功能增强
优雅降级 - 完整功能开发，降级兼容旧浏览器
@supports (display: grid) {
.container {
display: grid;
}
}
.element {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}