每日CSS一练 ✨

1. 基础选择器样式

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

/* 类选择器 - 为特殊元素添加星光效果 */
.star-effect {
  filter: drop-shadow(0 0 5px gold); /* 添加金色发光效果 */
  transition: all 0.3s ease;         /* 平滑过渡动画 */
}

2. 布局的艺术

/* 弹性布局容器 - 创造和谐的排列 */
.container {
  display: flex;            /* 启用弹性布局 */
  justify-content: center;  /* 水平居中子元素 */
  align-items: stretch;     /* 子元素等高拉伸 */
  gap: 1rem;                /* 元素间呼吸间隙 */
}

/* 网格布局 - 构建精密矩阵 */
.grid-system {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 智能响应式列 */
  grid-auto-rows: minmax(100px, auto); /* 灵活的行高控制 */
}

3. 动效之美

/* 悬浮动画 - 赋予元素生命力 */
.btn-hover {
  transform: translateY(0);     /* 初始位置 */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性过渡 */

  &:hover {
    transform: translateY(-5px); /* 悬浮时轻盈上浮 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 添加深度阴影 */
  }
}

/* 关键帧动画 - 创造视觉叙事 */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }     /* 初始状态 */
  50% { transform: scale(1.1); opacity: 0.8; } /* 呼吸放大 */
  100% { transform: scale(1); opacity: 1; }   /* 回归原点 */
}

4. 响应式设计

/* 媒体查询 - 适应不同视窗的优雅 */
@media (max-width: 768px) {
  .responsive-menu {
    flex-direction: column;  /* 小屏时垂直排列 */
    font-size: 1.2rem;       /* 增大可点击区域 */
  }

  /* 移动端专属优化 */
  .mobile-hide {
    display: none !important; /* 在移动端隐藏非必要元素 */
  }
}

5. 现代CSS特性

/* 变量定义 - 保持设计一致性 */
:root {
  --primary-color: #4361ee;   /* 定义主色调 */
  --text-dark: #2b2d42;       /* 深色文本 */
}

/* 剪切路径 - 创造几何艺术 */
.clip-art {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); /* 五边形裁剪 */
  background: linear-gradient(135deg, var(--primary-color), #3f37c9); /* 渐变背景 */
}