乐趣区

关于前端:现代-CSS-解决方案CSS-原生支持的三角函数

jiezi

在 CSS 中，存在许多数学函数，这些函数可能通过简略的计算操作来生成某些属性值，例如：

  • calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。
  • min() 和 max()：用于比拟一组数值中的最大值或最小值，也能够与任意长度、百分比或数值型数据一起应用。
  • clamp()：用于将属性值限度在一个范畴内，反对三个参数：最小值、推荐值和最大值。

在古代 CSS 解决方案：CSS 数学函数一文中，咱们具体介绍了

  • calc()
  • min()
  • max()
  • clamp()

四个数学函数。

而本文，将给大家介绍一下最近各大浏览器也逐步开始原生反对的三角函数：

  • sin()
  • cos()
  • tan()

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 中仅对弧度（radian）单位进行反对。如果想要在开发中应用三角函数，能够借助转换函数 deg() 和 rad() 将角度（degree）和弧度进行转换。

CSS3 的这些函数使得开发者能够更加不便解决一些简单的数学问题，加强了 CSS 的表现力。

三角函数的静止轨迹

三角函数的使用，更多的是在动画当中。以正弦、余弦函数为例，其图形如下：

咱们通过一个简略的例子，还原三角函数的图形，以此来感触三角函数的作用。首先，咱们实现一个彩色圆球：

<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 @property 变量：

  1. x 轴方向是 0px 到 80vw 的程度位移动画
  2. y 轴方向是 5 * sin(0deg) * 1em 到 5 * sin(1080deg) * 1em 的竖直动画

通过动画，动静的批改这两个变量的值，咱们就能够失去一个三角函数曲线动画图形：

如果咱们，设定多个截然不同的小球，同一个静止轨迹，设定不同的 animation-delay，成果会上怎么样呢？

<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;
    }
}

这样，就失去了这么一个动画，十分的相似三角函数动画的曲线：

残缺的代码，你能够戳这里：CodePen Demo — CSS Cos/Sin Math function

疾速实现圆弧轨迹动画

在之前，咱们想实现一个圆弧动画，如下所示，还是略微有点点麻烦的：

有了三角函数之后，相似的动画，能够节俭局部代码实现：

<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;}
}

外围就在于 transform: translate(calc(sin(var(--angle)) * 10vmin), calc(cos(var(--angle)) * 10vmin));，简化一下这段代码，表达式为：

  • transform: translate(sinX, conX)，其中 X 为角度变动

如此，咱们只须要动静设置 X 从 0deg 到 360deg 的变动即可，就能够失去一个圆形动画成果：

残缺的代码，你能够戳这里：CodePen Demo — CSS Cos/Sin Math function – arc animation

基于这个技巧，咱们能够尝试实现一个旋转的 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 实现了局部重复性代码，外围就是让小圆以不同的速率进行旋转动画，后果如下：

残缺的代码，你能够戳这里：CSS Cos/Sin Math function – Loading animation

尝试应用三角函数实现波浪线

那么，三角函数还有什么作用吗？

咱们来尝试点离奇的，借助三角函数实现曲线（波浪线）。

对 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 条波浪线：

独自看其中一个，其实是这样一坨 box-shadow 代码：

好吧，这个办法的确肯定水平上补救了之前 CSS 无奈无效绘制波浪线的缺点，然而，毛病也非常明显，编译后的代码量太多了！

残缺的代码，你能够戳这里：CSS Cos/Sin Math And box-shadow

曲线创意构想

有了绘制曲线的能力，咱们就能利用它在 CSS 中发明许多有美感、艺术性的成果。

咱们能够尝试应用这些曲线，来制作书签图案：

代码也不简单，我就不贴残缺的代码了，感兴趣的能够戳这里：CodePen Demo – CSS Cos/Sin Math And box-shadow – bookmark

相熟我的读者肯定对 CSS-doodle 不生疏，袁川老师，也就是 CSS-doodle 库的作者，在他的 Codepen 首页背景板中，应用的就是应用了三角函数实现的一副纯 CSS 画作：

Codepen Demo — border-radius

我之前也尝试应用三角函数，实现了一副丑一点的：

Codepen Demo — CSS-Doodle fish 🐟 & seaweed🍀

总结一下

CSS 原生反对的三角函数，给 CSS 关上了更多的可能性。

然而，咱们也必须看到，各种数学函数的减少，导致 CSS 的复杂度也是愈来愈高。CSS 曾经不再是十分纯正的负责款式了，很多时候，很多计算也能够间接在 CSS 当中实现。其中利弊，可能不同的人会有不一样的认识。至于好坏，交给工夫给出答案吧。

好了，本文到此结束，心愿对你有帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版