css 音乐频率
In addition to linear measurements, CSS can also be used to measure angles, as well as changes over time:
除了线性测量 ,CSS还可以用于测量角度以及随时间变化的角度:
角度测量 (Angular Measurements)
unit | Meaning |
---|---|
deg | degrees |
rad | radians |
grad | gradians |
turn | turns |
单元 | 含义 |
---|---|
deg | 度数 |
rad | 弧度 |
grad | 梯度 |
turn | 转弯 |
Originally, all of these units (with the exception of turn
) were associated with aural style sheets: styles designed to guide the pronunciation of words on web pages in cooperation with text-to-speech systems. Today, they are most strongly associated with CSS transforms.
最初,所有这些单元(除了turn
)都与听觉样式表相关联:这些样式旨在与文本语音转换系统配合使用来指导网页上单词的发音。 如今,它们与CSS转换关系最密切。
deg
: self-explanatory. Positive degree values rotate an element “clockwise”; negative values go counter-clockwise:deg
:不言自明。 正度值将元素“顺时针”旋转; 负值沿逆时针方向移动:
@animation sway {
to { transform: rotate(15deg); }
}
rad
: the arc of a circle with the same length as the radius of that circle: essentially, the distance of the radius “wrapped” around the circle, creating a measurement equal to 57.295 degrees or 1⁄(2π). Widely used in mathematics, where it has considerable advantages in calculations.rad
:长度与该圆的半径相同的圆的弧:本质上,半径“缠绕”在圆周围的距离,产生的测量值等于57.295度或1⁄(2π)。 广泛用于数学中,在计算方面具有相当大的优势 。Visualisation of radian unit; image courtesy of Wikipedia 可视化弧度单位; 图片由维基百科提供 grad
: equivalent to 9/10th of a degree. A complete circle is divided into 400grads, which makes right angle calculations easy: 90° is 100grad, 180° is 200grad, and so on.grad
:相当于第 9/10度。 一个完整的圆分为400grad,这使直角计算变得容易:90°是100grad,180°是200grad,依此类推。turn
: probably the most instinctive angular measurement system after degrees:1turn
is equal to 360°,.25turn
is 90°, etc. Can be useful for CSS animation. Note thatturn
is always singular when used in CSS (2turn
, etc).turn
:可能是度数之后最1turn
角度测量系统:1turn
等于360°,.25turn
是90°,.25turn
。可用于CSS动画 。 请注意,在CSS中使用turn
总是单数(2turn
等)。
@animation sway {
to { transform: rotate(.5turn); }
}
Note that angular measurements must always be defined by their unit (transform: rotate(45)
won’t work) unless the value is 0.
请注意,除非值是0,否则角度测量必须始终以其单位定义( transform: rotate(45)
将不起作用)。
时间测量 (Time Measurements)
Fairly straightforward: s
is the familiar second, while ms
is 1/1000th of a second. Seconds may also be provided as floating point numbers; no leading zero is required if the number of seconds is less than 1.
相当简单: s
是大家熟悉的第二,而ms
是1/1000秒。 还可以提供秒作为浮点数; 如果秒数小于1,则不需要前导零。
#spinner { transition: .5s; }
Which is equivalent to:
等效于:
#spinner { transition: 500ms; }
Time values must always be positive.
时间值必须始终为正。
频率测量 (Frequency Measurements)
Hertz (hz
) and kilohertz (khz
) are also supported in CSS; traditionally, they were used to suggest the pitch of a computer-generated voice when reading web page text. For reference, the range of human hearing is approximately 64Hz to 22,000Hz, from a very low bass to a high-pitched squeal, just under the ultrasonic. Hertz is also supported in the Web Audio API, although it is referenced in a different way.
CSS还支持赫兹( hz
)和千赫兹( khz
)。 传统上,它们用于建议阅读网页文本时计算机生成的语音的音调。 作为参考,人类的听觉范围大约是64Hz至22,000Hz,从非常低的低音到高音调的尖叫声,就在超声波之下。 Web Audio API也支持Hertz,尽管它以不同的方式引用。
That still doesn't cover all possible CSS measurements: there are also DPI (dots-per-inch) units, which I will address in a future article.
仍然不能涵盖所有可能CSS测量:还有DPI(每英寸点数)单位,我将在以后的文章中介绍。
翻译自: https://thenewcode.com/980/CSS-Units-Angles-Time-and-Frequency
css 音乐频率