css动效

/* CSS 动效示例 */

/* 1. 简单的鼠标悬停放大效果 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.3s ease;
}

.box:hover {
  transform: scale(1.2);
}

/* 解释：当鼠标悬停在 .box 元素上时，元素会平滑地放大到原来的 1.2 倍。transition 属性定义了变换的效果持续时间为 0.3 秒，并且使用了 ease 缓动函数来让动画更加自然。 */

/* 2. 文字颜色渐变动画 */
@keyframes colorChange {
  0% { color: red; }
  50% { color: green; }
  100% { color: blue; }
}

.text {
  animation: colorChange 5s infinite;
}

/* 解释：通过 @keyframes 定义了一个名为 colorChange 的动画，文字的颜色会在 5 秒内从红色变为绿色，再变为蓝色，然后无限循环。 */

/* 3. 滑入效果 */
.slide-in {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s ease;
}

.slide-in.show {
  opacity: 1;
  transform: translateX(0);
}

/* 解释：.slide-in 类初始状态下元素是透明且位于屏幕外左侧的。当添加 .show 类时，元素会逐渐变得不透明并滑入视图中，整个过程持续 1 秒。 */