CSS中，有很多物理函数，可以通过简单的估计操作生成单独的属性值，例如：
在《现代 CSS 解决方案：CSS 物理函数 [1]》一文中，我们详细介绍了
四种生理功能。
在这篇文章中，我将向大家介绍最近各大浏览器逐渐开始原生支持的三角函数：
CSS三角函数句型简介
首先我们来看看如何使用CSS三角函数：
.box {
/* 设置元素的宽度为 sin(30deg) 的值 */
width: calc(sin(30deg) * 100px);
/* 设置元素的高度为 cos(45deg) 的值 */
height: calc(cos(45deg) * 100%);
/* 设置元素的透明度为 tan(60deg) 的值 */
opacity: calc(tan(60deg));
}
上面的代码中，我们使用calc()函数进行估计，然后使用sin()、cos()和tan()函数对估计结果进行进一步处理，以达到不同的疗效。
需要注意的是，CSS3中三角函数仅支持弧度单位。 如果开发中想使用三角函数，可以使用转换函数deg()和rad()来转换度数和弧度。
CSS3的功能使开发者能够更方便地处理一些复杂的物理问题，提高CSS的表现力。
三角函数的轨迹
三角函数的运用在动画中较多。 以cosine和cosine函数为例，图形如下：
我们用一个简单的例子来还原三角函数的图形，从而了解三角函数的作用。 首先，我们实现一个白色球体：
<div class='g-single'></div>
.g-single {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
}
疗效如下：
我们可以通过transfrom使用CSS@property属性构造一个三角函数的使用场景：
.g-single {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
animation: move 5s infinite ease-in-out;
transform: translate(
calc(var(--dis) - 40vw),
calc(5 * sin(var(--angle)) * 1em)
);
}
@keyframes move {
0% {
--dis: 0px;
--angle: 0deg;
}
100% {
--dis: 80vw;
--angle: 1080deg;
}
}
上面的核心在于这段代码--transform:translate(calc(var(--dis)-40vw),calc(5*sin(var(--angle))*1em))，它使用了两个CSS@属性变量：
x轴方向是从0px到80vw的水平位移动画
y轴方向是从5*sin(0deg)*1em到5*sin(1080deg)*1em的垂直动画
通过动画，动态改变这两个变量的值，我们可以得到一个三角函数曲线动画图形：
如果我们设置多个具有相同轨迹的相同球，并设置不同的动画延迟，会产生什么效果？
<ul class="g-multi">
<li> </li>
// ... 一共 80 个 li
<li> </li>
</ui>
li {
animation: move 5s infinite ease-in-out;
transform: translate(
calc(var(--dis) - 40vw),
calc(5 * sin(var(--angle)) * 1em);
}
@for $i from 1 to $count {
li:nth-child(#{$i}) {
animation-delay: #{$i * 5 / $count * -1s};
}
}
@keyframes move {
0% {
--dis: 0px;
--angle: 0deg;
}
100% {
--dis: 80vw;
--angle: 1080deg;
}
}
这样就得到了一个动画，和三角函数动画的曲线非常相似：
完整代码可以点击这里：CodePenDemo--SSSCos/SinMathfunction[2]
快速实现圆弧轨迹动画
之前我们想要实现一个圆弧动画，如下图，还是有点麻烦：
借助三角函数css波浪线，保存部分代码即可实现类似的动画：
<div></div>
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.g-single {
background: #000;
width: 20px;
height: 20px;
border-radius: 50%;
animation: move 3s infinite linear;
transform: translate(
calc(sin(var(--angle)) * 10vmin),
calc(cos(var(--angle)) * 10vmin)
);
}
@keyframes move {
0% {
--angle: 0deg;
}
100% {
--angle: 360deg;
}
}
核心在于translate(calc(sin(var(--angle))*10vmin), calc(cos(var(--angle))*10vmin));，为了简化这段代码，表达式为：
这样我们只需要动态设置X从0deg到360deg的变化就可以得到矩形动画效果：
完整代码可以点击这里：CodePenDemo--SSSCos/SinMathfunction-arcanimation[3]
基于这个方法，我们可以尝试实现一个旋转的Loading动画，代码很简单：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
ul {
position: relative;
}
li {
position: absolute;
inset: 0;
border-radius: 50%;
animation: move 3s infinite ease-in-out;
transform: translate(
calc(sin(var(--angle)) * 60px),
calc(cos(var(--angle)) * 60px)
);
}
@for $i from 1 to 11 {
li:nth-child(#{$i}) {
animation-delay: #{ $i * -0.15 }s;
background: #{hsl(100 + $i * 15, 80%, 60%)};
}
}
@keyframes move {
0% {
--angle: 0deg;
}
100% {
--angle: 360deg;
}
}
使用SASS完成部分重复代码，核心是让小圆以不同的速度旋转动画，结果如下：
完整的代码可以戳这里：CSSCos/SinMathfunction-Loadinganimation[4]
尝试使用三角函数实现波浪线
那么三角函数还能做什么呢？
让我们尝试一些新的东西并使用三角函数实现曲线（波浪线）。
对box-shadow足够了解的朋友应该知道box-shadow支持多种阴影。 利用这个特性，已经有很多使用box-shadow来绘制单个标签的案例了。
利用三角函数和box-shadow支持多种阴影，我们可以用它们来实现波浪线。
事实上，可能需要使用SASS来简化自动编写的代码量。 我们看一个DEMO：
<div></div>
<div></div>
<div></div>
@function shadowSet($vx, $vy, $color) {
$shadow: 0 0 0 0 $color;
@for $i from 0 through 50 {
$x: calc(2 * sin(#{$i * 15 * 1deg}) * #{$vy});
$y: $i * $vy;
$shadow: $shadow, #{$x} #{$y} 0 0 $color;
}
@return $shadow;
}
div {
margin: auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f00;
box-shadow: shadowSet(3px, 3px, #f00);
}
div:nth-child(2) {
width: 6px;
height: 6px;
background: #fc0;
box-shadow: shadowSet(3px, 3px, #fc0);
}
div:nth-child(3) {
width: 4px;
height: 4px;
background: #000;
box-shadow: shadowSet(2px, 2px, #000);
}
这样我们就可以得到3条波浪线：
单独看其中一个，尽管它是一堆盒子阴影代码：
嗯，这个方法确实在一定程度上弥补了之前CSS未能有效绘制波浪线的缺陷css波浪线，而且缺陷也非常明显，编译代码量太多了！
完整代码可以点击这里：CSSCos/SinMathAndbox-shadow[5]
曲线创意
有了绘制曲线的能力，我们可以用它在CSS中创造出许多美丽的艺术效果。
我们可以尝试用这条曲线来制作书签图案：
代码并不复杂，所以就不贴出完整的代码了。 有兴趣的话可以点击这里：CodePenDemo-CSSCos/SinMathAndbox-shadow-bookmark[6]
熟悉我的读者一定熟悉CSS-doodle。 CSS-doodle库的作者袁川先生[7]在他的Codepen主页背景板上使用了利用三角函数实现的纯CSS。 绘画：
CodepenDemo--边框半径[8]
我之前也尝试过用三角函数，实现的有点难看：
CodepenDemo--CSS-Doodlefish&seaweed[9]
综上所述
CSS 原生支持的三角函数为 CSS 开辟了更多可能性。
但是，我们也必须听到，各种物理功能的减少，导致CSS的复杂度越来越高。 CSS 不再是一种纯粹负责的样式。 很多时候，很多计算也可以直接在CSS中完成。 优点和缺点可能因人而异。 至于利弊，让时间给出答案。
好了，这篇文章就到此结束了，希望对你有帮助:)
更多精彩CSS技术文章汇总在我的Github--iCSS[10]中，持续更新。 欢迎点击星星订阅合集。
如果还有疑问或者建议，可以多沟通。 原创文章文采有限，缺乏才华。 如果文章中有任何不准确的地方，请告诉我。
参考
[1]
现代 CSS 解决方案：CSS 物理函数：
[2]
CodePenDemo——SSSCos/SinMathfunction：
[3]
CodePenDemo--SSSCos/SinMathfunction-动画：
[4]
CSSCos/SinMath 函数 - 加载动画：
[5]
CSSCos/SinMathAndbox 阴影：
[6]
CodePenDemo-SSSCos/SinMathAndbox-shadow-书签：
[7]
袁川：
[8]
CodepenDemo --边框半径：
[9]
CodepenDemo--CSS-Doodlefish&seaweed:
[10]
Github--iCSS：
如果觉得还不错，欢迎点赞、收藏、转发❤❤
