css动画效果代码

当涉及到CSS动画效果时，有几种方法可以实现不同类型的动画。平移动画:

css
/* HTML元素选择器 */
div {
  /* 设置初始位置 */
  margin-left: 0;
  /* 添加动画效果 */
  transition: margin-left 1s ease-in-out;
}

/* 当鼠标悬停时应用的样式 */
div:hover {
  /* 设置结束位置 */
  margin-left: 100px;
}

旋转动画:

css
/* HTML元素选择器 */
div {
  /* 添加动画效果 */
  transition: transform 1s ease-in-out;
}

/* 当鼠标悬停时应用的样式 */
div:hover {
  /* 旋转45度 */
  transform: rotate(45deg);
}

缩放动画:

css
/* HTML元素选择器 */
div {
  /* 添加动画效果 */
  transition: transform 1s ease-in-out;
}

/* 当鼠标悬停时应用的样式 */
div:hover {
  /* 放大1.2倍 */
  transform: scale(1.2);
}

淡入淡出动画:

css
/* HTML元素选择器 */
div {
  /* 添加动画效果 */
  transition: opacity 1s ease-in-out;
}

/* 当鼠标悬停时应用的样式 */
div:hover {
  /* 完全透明 */
  opacity: 0;
}