css制作动态
使用CSS动画（@keyframes）
通过@keyframes定义关键帧动画，结合animation属性实现动态效果。例如，创建一个元素旋转动画：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.element {
animation: spin 2s linear infinite;
}过渡效果（transition）
通过transition属性实现属性变化的平滑过渡。适合悬停、点击等交互效果：
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}变换（transform）
利用transform实现平移、旋转、缩放等动态效果：
.box {
transform: translateX(50px) scale(1.2);
}滤镜动画（filter）
动态调整模糊、亮度等滤镜效果：
.image {
filter: blur(0px);
transition: filter 0.5s;
}
.image:hover {
filter: blur(5px);
}变量与动态更新
结合CSS变量和JavaScript实现动态样式调整：
:root {
--primary-color: #3498db;
}
.element {
background-color: var(--primary-color);
}document.documentElement.style.setProperty('--primary-color', '#e74c3c');响应式动画
通过媒体查询实现不同屏幕尺寸下的动态效果：
@media (max-width: 600px) {
.menu {
transform: translateX(-100%);
transition: transform 0.3s;
}
.menu.active {
transform: translateX(0);
}
}滚动驱动动画（Scroll-driven Animations）
使用scroll-timeline和view-timeline实现滚动触发的动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn linear;
animation-timeline: view();
}
