一、CSS三角函数是什么？
你可能听说过sin()、cos()这些数学函数，现在它们悄悄溜进了CSS的世界。简单来说，CSS Trigonometric Functions（三角函数）让我们可以直接在样式表中计算角度、距离和位置，不用再依赖JavaScript或者复杂的公式。
比如你想让一堆小图标均匀地排列在一个圆圈上，以前可能需要写循环计算坐标，现在用cos()和sin()就能轻松搞定。
技术栈：纯CSS
/* 定义一个圆形菜单，8个按钮均匀分布 */
.circle-menu {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
.menu-item {
position: absolute;
width: 50px;
height: 50px;
background: #3498db;
border-radius: 50%;
/* 使用三角函数计算位置 */
/* 角度递增45度（360/8），半径100px */
top: calc(50% + sin(calc(var(--i) * 45deg)) * 100px - 25px);
left: calc(50% + cos(calc(var(--i) * 45deg)) * 100px - 25px);
}
<div class="circle-menu">
<div class="menu-item" style="--i: 0;"></div>
<div class="menu-item" style="--i: 1;"></div>
<!-- 省略其他6个... -->
</div>
注释说明：
--i是自定义属性，表示第几个元素sin(角度)和cos(角度)会返回-1到1之间的值- 乘以半径100px后得到偏移量
- 最后减去元素宽度的一半（25px）实现居中
二、波形动画的魔法
三角函数最擅长的就是制造平滑的周期性运动。比如我们要做一个呼吸灯效果，或者模拟水波纹扩散，用sin()函数就能让动画变得自然流畅。
技术栈：纯CSS
.wave {
width: 100px;
height: 100px;
background: #e74c3c;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
/* 通过sin函数产生0到1之间的波动 */
transform: scale(calc(1 + sin(0turn) * 0.2));
}
50% {
/* 0.25turn等于90度，sin达到峰值1 */
transform: scale(calc(1 + sin(0.25turn) * 0.2));
}
}
注释说明：
0turn表示0度，1turn表示360度scale(1 + sin() * 0.2)让元素在原始大小上下波动20%- 关键帧设置在0%、50%、100%实现平滑循环
更复杂的波浪效果可以结合多个动画：
.wave-box {
height: 100px;
background: linear-gradient(
to right,
#3498db,
#2ecc71
);
/* 两个不同频率的波浪叠加 */
mask:
radial-gradient(
circle at 25% 50%,
black calc(20% + sin(var(--time)) * 15%),
transparent 0
),
radial-gradient(
circle at 75% 50%,
black calc(20% + cos(var(--time)) * 15%),
transparent 0
);
animation: wave 3s linear infinite;
}
@property --time {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes wave {
to {
--time: 1turn;
}
}
三、实际应用场景
圆形导航菜单
像开头展示的那样，用三角函数可以轻松实现雷达扫描式的菜单布局，比传统定位方式更灵活。数据可视化
在饼图或雷达图中，不需要依赖SVG或Canvas，直接用CSS就能绘制准确的角度标记。动态背景
创建会"呼吸"的背景图案，比如模拟水面波纹、浮动气泡等效果。加载动画
让多个元素沿着复杂路径运动，比如模拟行星轨道。
技术栈：纯CSS
/* 行星轨道示例 */
.orbit {
position: relative;
width: 200px;
height: 200px;
}
.planet {
position: absolute;
width: 20px;
height: 20px;
background: #f1c40f;
border-radius: 50%;
top: calc(50% + sin(var(--angle)) * 80px - 10px);
left: calc(50% + cos(var(--angle)) * 80px - 10px);
animation: orbit 5s linear infinite;
animation-delay: calc(var(--i) * -1s);
}
@keyframes orbit {
to {
--angle: 1turn;
}
}
四、注意事项与总结
虽然CSS三角函数很强大，但使用时要注意：
浏览器支持
目前所有现代浏览器都支持，但老旧设备可能需要备用方案。性能考量
过度复杂的计算可能影响渲染性能，特别是在低端设备上。可读性
大量嵌套的calc()和三角函数会让代码难以维护，建议合理拆分。单位处理
角度单位可以用deg、rad或turn，但要保持一致性。
总的来说，CSS Trigonometric Functions为我们打开了新世界的大门，让很多原本需要JavaScript的视觉效果现在用纯CSS就能实现。从简单的圆形布局到复杂的波形动画，这些数学函数让样式表变得更加强大和灵活。下次当你需要处理环形布局或周期性动画时，不妨试试这些三角函数，可能会收获意想不到的效果！
评论