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();
}