sin()
**sin()
** CSS 函数 是一个三角函数,它返回一个数字的正弦值,该值介于 -1
和 1
之间。该函数包含一个必须解析为 <number>
或 <angle>
的单个计算,方法是将参数的结果解释为弧度。也就是说,sin(45deg)
、sin(0.125turn)
和 sin(3.14159 / 4)
都表示相同的值,大约为 0.707
。
语法
css
/* Single <angle> values */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));
/* Single <number> values */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));
/* Other values */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));
参数
返回值
angle
的正弦值将始终返回 −1
和 1
之间的一个数字。
- 如果
angle
为infinity
、-infinity
或NaN
,则结果为NaN
。 - 如果
angle
为0⁻
,则结果为0⁻
。
正式语法
示例
更改盒子大小
在此示例中,sin(30deg)
将返回 0.5
,使盒子的宽度和高度都为 50px
。
css
div {
background-color: red;
width: calc(sin(30deg) * 100px);
height: calc(sin(30deg) * 100px);
}
控制动画持续时间
另一个用例是控制 animation-duration
,根据正弦值减少持续时间。在这种情况下,动画持续时间将为 1s
。
css
div {
animation-name: myAnimation;
animation-duration: calc(sin(0.25turn) * 1s);
}
规范
规范 |
---|
CSS 值和单位模块级别 4 # trig-funcs |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。