小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

一个蒙面面具的眼睛像不像一个躺“8”字的效果，实现思路：利用两个下面的图形进行位移和旋转变换拼接得到。 此图命名为：单眼，如下：

容器

<div class="eight"></div>

绘制躺“8”字我们准备一个div元素足以，接下来就是它的变身时刻。

样式

为了把躺“8”字放在固定的容器中，我们需要计算容器的宽高，需要用到√2的值：1.4142135623730951，js获得其值为:

Math.sqrt(2)

容器大小

我们把两个单眼，一个紧靠容器的左侧，一个紧靠容器的右侧。在最后的拼接过程中，单眼需要旋转45deg，那么

容器的高：就是单眼的高，即代码中的 size，

容器的宽：就是图形中的 2h + bh，最重要的是 bh ：由图可知是圆（不含边）直径的√2倍减去圆（含边）直径。

.eight{
    --size: 100px;
    --bw: 20px;
    width: calc(var(--size) * 2 + (var(--size) - var(--bw)) * 1.414 - var(--size));
    height: var(--size);
    position: relative;
}

单眼

单眼需要旋转变换，并且要给个紧靠容器边的定位。

.eight::before,
.eight::after {
    content: '';
    position: absolute;
    width: var(--size);
    height: var(--size);
    border: var(--bw) solid red;
    border-radius: 50% 50% 0 50%;
    box-sizing: border-box;
}

.eight::before {
    transform: rotate(-45deg);
    left: 0;
}

.eight::after {
    transform: rotate(135deg);
    right: 0;
}

最终的效果

展示的效果如上，如果你想改变躺“8”字的大小或者粗细，直接修改 --size 或 --bw即可。

总结

要想写一个严格的躺“8”字效果，即可以自适应，就需要对容器的宽度严格控制。或者你可以给个固定的容器，然后去严格控制两个单眼的定位。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。