免费CSS三角函数生成器

免费在线CSS三角函数生成器，支持sin()、cos()、tan()、asin()、acos()、atan()、atan2()函数，实时预览动画和布局效果。无需注册。 | 无需注册 · 数据绝不上传服务器

零依赖·可离线使用

效果预览

演示模式

元素数量 8

半径/振幅 100px

动画速度 3s

常见问题

CSS三角函数是什么？

CSS Values Level 5引入的数学函数，包括sin()、cos()、tan()等。允许在CSS中直接使用三角函数计算值，用于圆形布局、波浪动画等，无需JavaScript。

哪些浏览器支持？

Chrome 111+、Firefox 108+、Safari 15.4+、Edge 111+均已支持。

参数是什么单位？

使用角度或弧度：deg(度)、rad(弧度)、grad(梯度)、turn(圈)。如sin(90deg)=1。

有什么实际用途？

圆形布局、波浪动画、旋转运动、动态大小等。用cos()/sin()计算位置，比关键帧动画更优雅。

sin()/cos()返回值范围？

返回-1到1的无单位数字。需乘以具体值：translateX(calc(sin(45deg) * 100px))≈70.7px。

CSS三角函数生成器能做什么？

CSS三角函数生成器是一款专为CSS Values Level 5三角函数设计的可视化工具，支持sin()、cos()、tan()等CSS数学函数，实时预览圆形布局、波浪动画、椭圆轨道等效果，自动生成可用的CSS代码。

核心功能

4种演示模式：圆形布局、波浪动画、椭圆轨道、脉冲缩放
实时预览：调节参数立即看到效果变化
自动生成CSS：一键复制可直接使用的CSS代码
参数可调：元素数量、半径、动画速度自由控制

应用场景

圆形菜单：用sin()/cos()实现环形导航菜单，无需JavaScript计算位置。

波浪动画：用sin()创建平滑的波浪效果，比关键帧动画更优雅。

加载动画：椭圆轨道和脉冲缩放效果，纯CSS实现。

扩展知识

CSS三角函数在2023年被所有主流浏览器支持。它们属于CSS Values and Units Level 5规范，与calc()、min()、max()、clamp()等函数配合使用。角度单位支持deg、rad、grad、turn。sin()和cos()返回-1到1的无单位数字，需乘以具体值使用。

📐 CSS三角函数生成器