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 的时候，我们可以得到一个和元素大小一样的阴影：

div {
    width: 80px;
    height: 80px;
    border: 1px solid #333;
    box-sizing: border-box;
    box-shadow: 80px 80px 0 0 #000;
}

得到如下结果：

阴影可以是多重的

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

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

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 里的波浪下划线