🌈 CSS 每日一练

🎨 渐变背景的艺术

.gradient-bg {
  background: linear-gradient(
    135deg,
    #ff9a9e 0%,
    #fad0c4 50%,
    #fbc2eb 100%
  );
  height: 100vh;
  transition: all 0.5s ease;
}

.gradient-bg:hover {
  background: linear-gradient(
    135deg,
    #a18cd1 0%,
    #fbc2eb 50%,
    #ff9a9e 100%
  );
}

如同晚霞渐变，CSS渐变让界面充满生命力。这段代码创建了柔和的粉紫色渐变背景，悬停时如暮色变幻，展现CSS的流动之美。

✨ 悬浮卡片特效

.card {
  width: 300px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  background: white;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

卡片如羽毛般轻盈升起，阴影随之舒展，仿佛被无形之手托起。这种微交互让平面设计跃然屏上。

🌟 文字流光溢彩

.shine-text {
  font-size: 3rem;
  background: linear-gradient(
    to right,
    #ff4d4d,
    #f9cb28,
    #4dff4d,
    #4dd0e1,
    #ff4dff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300% 300%;
  animation: rainbow 5s ease infinite;
}

@keyframes rainbow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

文字如彩虹流淌，色彩在字符间跳跃舞动。这种技巧将单调的文字变成视觉盛宴，令人过目难忘。

🌀 加载动画之美

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

这个旋转的蓝色圆环如同时间的年轮，永不停息地转动。简单的几行CSS就能创造出优雅的等待动画，化解用户等待的焦虑。