标签：

原文:CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

最近一直在使用 css-doodle 实现一些 CSS 效果。

css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。后续几篇文章可能都会与之有关。

当然，本文的主角并不是 css-doodle。

CSS本身一直在快速发展更新，标准也与时俱进，各种新特性层出不穷，为了能够使用 CSS 来创造各种布局实现各种形状，除了合理运用及搭配各个属性之外，去理解压榨每个属性的每个细节点也是非常重要的。

本文将介绍一种在 CSS 中借助三角函数绘制曲线图形的小技巧。

 

理解 box-shadow

首先，回顾一下 box-shadow 这个属性。基本属性用法就是给元素创造一层阴影。

关于阴影的许多细节，可以先看看这篇文章：你所不知道的 CSS 阴影技巧与细节

再简单提一下，本文会用到的关于阴影的第一个技巧：

 

使用阴影复制图像/投影图像

当 box-shadow 的第三、第四个参数模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影：

1

2

3

4

5

6

7

 

div {

    width: 80px;

    height: 80px;

    border: 1px solid #333;

    box-sizing: border-box;

    box-shadow: 80px 80px 0 0 #000;

}

 

得到如下结果：

 

阴影可以是多重的

第二个技巧则是，box-shadow 是允许多重阴影的，并且他们的坐标是可以完全掌控的。

是的，我们可以像下面这样给一个元素定义多重阴影，并且利用阴影的第一、第二个参数控制它相对于元素的坐标：

1

2

3

4

5

6

7

8

9

10

11

 

div {

    width: 80px;

    height: 80px;

    border: 1px solid #333;

    box-sizing: border-box;

    box-shadow:

        80px 80px 0 0 #000,

        70px 70px 0 0 #000,

        ...

        60px 60px 0 0 #000;

}

 

　　 

在阴影坐标中运用三角函数

继续。接下来，我们尝试在阴影的坐标中引入三角函数。

为啥是三角函数，不是圆的标准方程或者椭圆的标准方程或者其他图形函数呢？当然也是可以的，只是这里借助三角函数的 cos 或 sin 可以实现直接使用 CSS 实现起来很困难的曲线。

带着疑问，先继续向下，假设我们要实现这样一条曲线：

使用 CSS 的话，有什么办法呢？

可能的一些办法是 clip-path，或者一些奇技淫巧，使用 text-decoration 里的波浪下划线 wavy，或者是使用渐变叠加。

当然，，还有一种办法是本文将提到的使用 box-shadow 及 三角函数。

 

三角函数

咳咳，简单回顾下三角函数里面的 sin、cos 曲线图像变换，还没有全部还给老师。

如果我们有一个 1x1 的 div，它的多重阴影，能够按照像正弦/余弦函数的图像一样进行排布，连起来不就是一条曲线吗？

 

如何在 CSS 中使用三角函数 sin/cos

想法不错，但是 CSS 本身并没有提供三角函数。这里，我们需要借助 Sass 来在 CSS 中实现简单的三角函数。

还好，已经有前人帮忙把这个工作做完了：

trigonometry in sass

在Sass中实现三角函数计算

简单而言，就是借助三角函数的泰勒展开式，使用 Sass 函数模拟实现三角函数的 sin()、cos()、tan()：