css制作动态特效
CSS 动态特效实现方法
关键帧动画（@keyframes） 通过定义关键帧实现复杂动画效果，示例代码：
@keyframes slideIn {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.element {
animation: slideIn 1s ease-out;
}过渡效果（transition） 实现属性变化的平滑过渡：
.button {
transition: background-color 0.3s, transform 0.2s;
}
.button:hover {
background-color: #4CAF50;
transform: scale(1.05);
}3D变换（transform） 创建三维空间效果：
.card {
transform-style: preserve-3d;
transition: transform 1s;
}
.card:hover {
transform: rotateY(180deg);
}滤镜效果（filter） 添加视觉特效：
.image {
transition: filter 0.5s;
}
.image:hover {
filter: blur(2px) brightness(120%);
}SVG动画 结合CSS控制SVG图形：
svg path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
@keyframes dash {
to { stroke-dashoffset: 0; }
}视差滚动效果 利用background-attachment创建深度感：
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}混合模式（mix-blend-mode） 实现元素间的色彩混合：
.overlay {
mix-blend-mode: multiply;
background-color: rgba(255,0,0,0.5);
}响应式动画 结合媒体查询调整动画：
@media (max-width: 768px) {
.animation {
animation-duration: 0.5s;
}
}性能优化建议
- 优先使用transform和opacity属性
- 避免频繁触发重排属性如width/height
- 使用will-change属性预声明变化元素
- 硬件加速：transform: translateZ(0)
