CSS每日魔法从选择器到动画的创意代码之旅

一言准备中...

# CSS 每日一练 🌈

## 1. 基础选择器样式 ✨

```css
/* 通用选择器：为所有元素设置默认边距清零 */
* {
  margin: 0;   /* 清除默认外边距 */
  padding: 0;  /* 清除默认内边距 */
  box-sizing: border-box; /* 盒模型计算包含边框 */
}

/* 类选择器：为特殊按钮添加渐变背景 */
.btn-gradient {
  background: linear-gradient(90deg, #FF6B6B, #4ECDC4); /* 红到青的水平渐变 */
  border-radius: 25px;      /* 圆角效果 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 柔和阴影 */
}

2. 布局艺术 🎨

/* 弹性布局容器：创建水平居中排列 */
.flex-container {
  display: flex;           /* 启用弹性布局 */
  justify-content: center; /* 主轴居中排列 */
  align-items: center;     /* 交叉轴居中对齐 */
  gap: 20px;               /* 子元素间隔 */
}

/* 网格布局：创建响应式图片墙 */
.gallery {
  display: grid;                          /* 启用网格布局 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动填充列 */
  grid-gap: 15px;                         /* 网格间隙 */
  padding: 2rem;                          /* 内边距 */
  background-color: #f8f9fa;              /* 浅灰背景 */
}

3. 动画魔法 ✨

/* 关键帧动画：实现心跳效果 */
@keyframes heartbeat {
  0% { transform: scale(1); }           /* 原始尺寸 */
  25% { transform: scale(1.1); }        /* 轻微放大 */
  50% { transform: scale(1); }          /* 恢复原样 */
  75% { transform: scale(1.2); }        /* 再次放大 */
  100% { transform: scale(1); }         /* 最终恢复 */
}

/* 应用动画的元素 */
.heart {
  animation: heartbeat 1.5s infinite;   /* 无限循环动画 */
  color: #ff4757;                       /* 心跳红颜色 */
  font-size: 2rem;                      /* 图标大小 */
}

4. 响应式设计 📱

/* 媒体查询：适配移动设备 */
@media (max-width: 768px) {
  /* 导航栏改为垂直布局 */
  .navbar {
    flex-direction: column;    /* 垂直排列 */
    padding: 1rem 0;           /* 调整内边距 */
  }

  /* 调整标题大小 */
  h1 {
    font-size: 1.8rem;         /* 缩小字号 */
    text-align: center;        /* 文字居中 */
  }
}

5. 文字特效 🖋️

/* 文字渐变效果 */
.text-gradient {
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); /* 三色渐变 */
  -webkit-background-clip: text;    /* 限定背景到文字区域 */
  color: transparent;               /* 使文字透明显示渐变 */
  font-weight: 700;                 /* 加粗字体 */
  font-size: 2.5rem;                /* 增大字号 */
}