🌈 CSS 每日一练

🎨 渐变色文字特效

.gradient-text {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  animation: gradientShift 5s infinite alternate;
}

@keyframes gradientShift {
  100% {
    background-position: 100%;
  }
}

效果：文字如彩虹流动，色彩温柔渐变，为页面注入灵动气息。

🌀 悬浮立体卡片

.card-3d {
  width: 300px;
  padding: 2rem;
  border-radius: 15px;
  background: linear-gradient(145deg, #ffffff, #f0f0f0);
  box-shadow: 20px 20px 60px #d9d9d9, 
              -20px -20px 60px #ffffff;
  transition: transform 0.5s, box-shadow 0.5s;
}

.card-3d:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow: 25px 25px 70px #c7c7c7, 
              -25px -25px 70px #ffffff;
}

特点：拟物化设计，悬浮时产生微妙的3D倾斜效果，如同真实卡片被拾起。

🌟 星光加载动画

.loading-stars {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.star {
  width: 20px;
  height: 20px;
  background: gold;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );
  opacity: 0.3;
  animation: twinkle 1.5s infinite ease-in-out;
}

.star:nth-child(2) { animation-delay: 0.2s; }
.star:nth-child(3) { animation-delay: 0.4s; }

@keyframes twinkle {
  50% { 
    transform: scale(1.5); 
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.8));
  }
}

意境：三颗星辰交替闪烁，如同夜空中窃窃私语的星光，优雅地等待内容加载。

🍃 自然风吹动的元素

@keyframes gentleWind {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.leaf, .paper {
  animation: gentleWind 3s ease-in-out infinite;
  transform-origin: top center;
}

.leaf {
  width: 40px;
  height: 40px;
  background: #8bc34a;
  border-radius: 50% 0;
}

.paper {
  width: 80px;
  padding: 15px;
  background: floralwhite;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

诗意：让界面元素如春日新叶般随风轻摆，赋予静态页面自然的生命力。

✨ 高级聚焦效果

.input-glow:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-glow {
  transition: all 0.3s;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

体验：输入框获得焦点时绽放柔和光晕，如月光轻抚水面，引导用户自然交互。