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实现位移、缩放、旋转等动态效果：

.card {
  transform: scale(1);
  transition: transform 0.5s;
}
.card:hover {
  transform: scale(1.05);
}

使用CSS变量动态更新

通过JavaScript修改CSS变量实现实时动态变化：

:root {
  --primary-color: #3498db;
}
.element {
  background-color: var(--primary-color);
}

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

视差滚动效果

利用background-attachment: fixed创建视差滚动：

.parallax {
  background-image: url("image.jpg");
  background-attachment: fixed;
  background-position: center;
  height: 100vh;
}

响应式动画

通过媒体查询适配不同设备的动态效果：

@media (max-width: 768px) {
  .menu {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  .menu.active {
    transform: translateX(0);
  }
}

使用CSS滤镜（filter）

动态调整元素的视觉效果：

.image {
  filter: grayscale(80%);
  transition: filter 0.4s;
}
.image:hover {
  filter: grayscale(0%);
}

动态阴影效果

通过box-shadow创建悬浮效果：

.box {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s;
}
.box:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}