CSS 数学函数:cos() 和 sin() 使用指南

CSS 三角函数彻底改变了我们在不使用 JavaScript 的情况下创建复杂布局和动画的方式。在这些强大的工具中,cos() 和 sin() 作为创建圆形布局、波浪图案和流畅动画的核心函数脱颖而出。

通过单位圆理解 CSS cos() 和 sin()

CSS cos() 和 sin() 函数使用单位圆概念将角度映射到坐标。可以将单位圆想象成一个半径为 1、圆心位于坐标系原点的圆。

• cos() 返回给定角度的 X 坐标
• sin() 返回给定角度的 Y 坐标

当您向这些 CSS 数学函数传递一个角度时,它们会返回 -1 到 1 之间的值,表示单位圆上的位置。这种数学关系成为创建动态 CSS 布局的基础。

/* 基本语法 */
.element {
  --angle: 45deg;
  --x: cos(var(--angle)); /* 返回约 0.707 */
  --y: sin(var(--angle)); /* 返回约 0.707 */
}

使用 CSS 三角函数创建圆形布局

CSS cos() 和 sin() 最实用的应用之一是将元素围绕圆形定位。这种技术无需硬编码位置或 JavaScript 计算。

.circular-menu {
  --radius: 150px;
  --total-items: 6;
}

.menu-item {
  --angle: calc(360deg / var(--total-items) * var(--index));
  transform: 
    translateX(calc(cos(var(--angle)) * var(--radius)))
    translateY(calc(sin(var(--angle)) * var(--radius)));
}

这种方法可以自动将元素均匀分布在圆周上,非常适合径向菜单、时钟表盘或装饰性布局。CSS 单位圆概念可以自然地适配您选择的任何半径值。

构建波浪图案和振荡 CSS 动画

CSS 三角函数在创建有机波浪图案方面表现出色。由于 sin() 和 cos() 产生平滑的振荡,它们非常适合创建类似波浪的 CSS 动画,而无需复杂的关键帧。

.wave-element {
  --frequency: 2;
  --amplitude: 50px;
  --phase: calc(var(--index) * 30deg);
  
  transform: translateY(
    calc(sin(var(--phase) * var(--frequency)) * var(--amplitude))
  );
}

对于动态波浪效果,可以将这些函数与 CSS 自定义属性和动画结合使用:

@property --progress {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

.oscillating {
  --wave: calc(sin(var(--progress) * 360deg) * 100px);
  transform: translateX(var(--wave));
  animation: wave-motion 2s linear infinite;
}

@keyframes wave-motion {
  to { --progress: 1; }
}

性能和浏览器支持

CSS 数学函数(包括 cos() 和 sin())现在在所有主流浏览器中都已获得基线支持。这些函数在浏览器的渲染管线中经过原生优化,相比基于 JavaScript 的计算,为 CSS 布局和动画提供了更好的性能。

主要优势:

• 无运行时 JavaScript 开销
• 计算发生在样式计算阶段
• 视口或属性变化时自动重新计算
• 与 CSS transforms 结合使用时可实现流畅的 60fps 动画

实用实现技巧

在使用 CSS 三角函数时,请记住以下最佳实践:

1. 使用 CSS 自定义属性以实现可重用的值和更易于维护
2. 与 calc() 结合使用将结果从单位圆的 -1 到 1 范围进行缩放
3. 利用 transform 属性实现硬件加速动画
4. 考虑响应式单位如 vw 或 cqi 以实现可缩放布局

/* 响应式圆形布局 */
.item {
  --responsive-radius: min(40vw, 300px);
  --x: calc(cos(var(--angle)) * var(--responsive-radius));
  --y: calc(sin(var(--angle)) * var(--responsive-radius));
  transform: translate(var(--x), var(--y));
}

总结

CSS cos() 和 sin() 函数为 Web 布局带来了数学精度,且无需依赖 JavaScript。从圆形导航菜单到流畅的波浪动画,这些 CSS 数学函数提供了原生浏览器性能以及更清晰、更易维护的代码。随着浏览器支持的不断完善,CSS 三角函数正在成为现代 CSS 布局和动画的必备工具。

常见问题

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..