目录

动画 ✅ 现代CSS标准

Transform 变换 (完全推荐使用)

transform: rotate(20deg); /* 旋转 */
transform: skew(45deg); /*　扭曲　skewX(x) skewY(y)　*/
transform: scale(1.5, 0.5); /* 放大与缩小　*/
transform: translate(50px, 100px); /* 元素移动 */

/* 组合变换 */
transform: rotate(45deg) scale(1.2) translate(100px, 50px);

/* 3D变换 */
transform: rotateX(30deg) rotateY(45deg) translateZ(100px);
transform-style: preserve-3d; /* 保持3D空间 */

Transition 过渡动画

/* 基础过渡 */
.button {
  transition: all 0.3s ease;
}

/* 多属性过渡 */
.card {
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
              opacity 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  opacity: 0.9;
}

Animation 关键帧动画

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.6s ease-out;
}

/* 无限循环动画 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s infinite;
}

隐藏元素

在 CSS 中，让元素隐藏的方法很多：

  • 有的占据空间，有的不占据空间

  • 有的可以响应点击，有的不能响应点击

 {
  display: none; /* 不占据空间，无法点击 */
}
 {
  visibility: hidden; /* 占据空间，无法点击 */
}
 {
  position: absolute;
  top: -999em; /* 不占据空间，无法点击 */
}
 {
  position: relative;
  top: -999em; /* 占据空间，无法点击 */
}
 {
  position: absolute;
  visibility: hidden; /* 不占据空间，无法点击 */
}
 {
  height: 0;
  overflow: hidden; /* 不占据空间，无法点击 */
}
 {
  opacity: 0;
  filter: Alpha(opacity=0); /* 占据空间，可以点击 */
}
 {
  position: absolute;
  opacity: 0;
  filter: Alpha(opacity=0); /* 不占据空间，可以点击 */
}

/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
 {
  zoom: 0.001;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
/* 不占据空间，无法点击 */
 {
  position: absolute;
  zoom: 0.001;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

现代CSS特性 🚀 2018年后新增

CSS自定义属性 (CSS变量)

/* 根级别定义变量 */
:root {
  --primary-color: #42b883;
  --secondary-color: #369870;
  --spacing-unit: 8px;
  --border-radius: 8px;
}

/* 使用变量 */
.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
  border-radius: var(--border-radius);
}

/* 动态切换主题 */
[data-theme="dark"] {
  --primary-color: #64ffda;
  --bg-color: #1a1a1a;
}

/* JavaScript动态修改 */
/* document.documentElement.style.setProperty('--primary-color', '#ff6b6b'); */

现代CSS函数

clamp() 响应式数值

/* 响应式字体 - 无需媒体查询 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* 最小1.5rem，理想4vw，最大3rem */
}

/* 响应式间距 */
.container {
  padding: clamp(16px, 5vw, 64px);
  max-width: clamp(320px, 90vw, 1200px);
}

min() 和 max() 函数

/* 动态宽度控制 */
.card {
  width: min(100%, 400px);        /* 不超过容器宽度，最大400px */
  height: max(300px, 50vh);       /* 至少300px，理想50vh */
}

/* 响应式间距 */
.section {
  margin-top: max(2rem, 5vh);     /* 至少2rem，大屏幕时更大 */
}

calc() 计算函数

/* 精确计算 */
.sidebar {
  width: calc(100% - 300px);
  height: calc(100vh - 80px);     /* 视口高度减去头部高度 */
}

/* 结合CSS变量 */
.element {
  padding: calc(var(--spacing-unit) * 3);
  margin: calc(var(--spacing-unit) / 2);
}

宽高比控制

aspect-ratio 属性

/* ✅ 现代方案 - 一行搞定 */
.video-container {
  aspect-ratio: 16 / 9;           /* 16:9宽高比 */
}

.square {
  aspect-ratio: 1;                /* 正方形 */
}

.card-image {
  aspect-ratio: 4 / 3;            /* 4:3宽高比 */
  object-fit: cover;              /* 图片填充方式 */
}

/* ❌ 传统方案对比 - 复杂难懂 */
.old-aspect-ratio {
  width: 100%;
  padding-top: 56.25%;           /* 16:9 = 9/16*100% */
  position: relative;
}

现代单位

视口单位增强

/* 基础视口单位 */
.hero {
  height: 100vh;                  /* 视口高度 */
  width: 100vw;                   /* 视口宽度 */
}

/* 新的视口单位 (2022年+) */
.mobile-hero {
  height: 100dvh;                 /* 动态视口高度 - 解决移动端地址栏问题 */
  min-height: 100svh;             /* 小视口高度 */
  max-height: 100lvh;             /* 大视口高度 */
}

容器查询单位

/* 基于容器大小的单位 */
.card {
  container-type: inline-size;
}

.card-title {
  font-size: 4cqw;                /* 容器宽度的4% */
}

@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

现代选择器

:is() 和 :where() 选择器

/* ✅ 简化复杂选择器 */
:is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  color: var(--heading-color);
}

/* 等同于传统写法 */
/* h1, h2, h3, h4, h5, h6 { margin-top: 0; } */

/* :where() 零权重选择器 */
:where(ul, ol) :where(ul, ol) {
  margin-block: 0;
}

:has() 父选择器

/* ✅ 根据子元素选择父元素 */
.card:has(.urgent) {
  border-color: red;
  background: #fff5f5;
}

.form:has(input:invalid) {
  border: 2px solid red;
}

.article:has(> img) {
  display: grid;
  grid-template-columns: 1fr 200px;
}

逻辑属性

/* ✅ 逻辑属性 - 支持RTL布局 */
.element {
  margin-block-start: 16px;       /* 替代 margin-top */
  margin-inline-end: 24px;        /* 替代 margin-right (LTR) 或 margin-left (RTL) */
  padding-inline: 20px;           /* 替代 padding-left + padding-right */
  border-block-end: 1px solid;    /* 替代 border-bottom */
}

/* 自动适应文字方向 */
.text {
  text-align: start;              /* 替代 text-align: left */
  float: inline-start;            /* 替代 float: left */
}

现代滚动特性

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 滚动捕捉 */
.gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

.gallery-item {
  scroll-snap-align: start;
}

/* 滚动边距 */
.section {
  scroll-margin-top: 80px;        /* 锚点定位时的偏移 */
}

最佳实践建议

现代CSS开发流程

/* 1. 使用CSS自定义属性建立设计系统 */
:root {
  --color-primary: #42b883;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --border-radius: 8px;
}

/* 2. 使用现代布局 */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--spacing-md);
}

/* 3. 响应式设计 */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* 4. 现代动画 */
.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-2px);
}