css制作动态

使用CSS动画制作动态效果

CSS动画可以通过@keyframes和animation属性实现元素动态变化。定义一个关键帧动画并应用到元素上。

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slideIn 1s ease-out forwards;
}

使用CSS过渡效果

CSS过渡能在属性变化时产生平滑动画效果，适用于悬停、焦点等交互状态。

.button {
  background-color: blue;
  transition: background-color 0.3s ease, transform 0.2s;
}

.button:hover {
  background-color: red;
  transform: scale(1.05);
}

制作无限循环动画

通过设置animation-iteration-count: infinite可创建无限循环动画。

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 2s linear infinite;
}

使用CSS变量实现动态主题

CSS变量结合JavaScript可以实时修改样式属性，实现主题切换等动态效果。

:root {
  --primary-color: #4285f4;
}

.header {
  background-color: var(--primary-color);
}

制作3D变换效果

CSS的transform-style: preserve-3d和perspective属性可创建3D动态效果。

.card {
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card:hover {
  transform: rotateY(180deg);
}

响应式动态布局

使用CSS媒体查询和弹性布局实现响应式动态调整。

.container {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}