大家好，这里是 CSS 兼 WebGL 魔法使——alphardex。
之前一直在玩 three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。
然而，我们可以通过一些小技巧，来创作出一些属于自己的 CSS 数学函数，从而实现一些有趣的动画效果。
让我们开始吧！
注意：以下的函数用原生 CSS 也都能实现，这里用 SCSS 函数只是为了方便封装，封装起来的话更方便调用
绝对值就是正的还是正的，负的变为正的
可以创造 2 个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值
@function abs($v) { @return max(#{$v}, calc(-1 * #{$v})); }
中位数原数减 1 并乘以一半即可
@function middle($v) { @return calc(0.5 * (#{$v} - 1)); }
数轴上两点距离数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来
@function dist-1d($v1, $v2) { $v-delta: calc(#{$v1} - #{$v2}); @return #{abs($v-delta)}; }
三角函数其实这个笔者也不会实现~不过之前看到过好友 chokcoco 的一篇文章写到了如何在 CSS 中实现三角函数，在此表示感谢
@function fact($number) { $value: 1; @if $number>0 { @for $i from 1 through $number { $value: $value * $i; } } @return $value; } @function pow($number, $exp) { $value: 1; @if $exp>0 { @for $i from 1 through $exp { $value: $value * $number; } } @else if $exp < 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; } @function rad($angle) { $unit: unit($angle); $unitless: $angle / ($angle * 0 + 1); @if $unit==deg { $unitless: $unitless / 180 * pi(); } @return $unitless; } @function pi() { @return 3.14159265359; } @function sin($angle) { $sin: 0; $angle: rad($angle); // Iterate a bunch of times. @for $i from 0 through 20 { $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1); } @return $sin; } @function cos($angle) { $cos: 0; $angle: rad($angle); // Iterate a bunch of times. @for $i from 0 through 20 { $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i); } @return $cos; } @function tan($angle) { @return sin($angle) / cos($angle); }
例子以下的几个动画特效演示了上面数学函数的作用
初始状态
创建一排元素，用内部阴影填充，准备好我们的数学函数
<div> <div></div> ...(此处省略14个 list-item) <div></div> </div>
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: #222; } :root { --blue-color-1: #6ee1f5; } (这里复制粘贴上文所有的数学公式) .list { --n: 16; display: flex; flex-wrap: wrap; justify-content: space-evenly; &-item { --p: 2vw; --gap: 1vw; --bg: var(--blue-color-1); @for $i from 1 through 16 { &:nth-child(#{$i}) { --i: #{$i}; } } padding: var(--p); margin: var(--gap); box-shadow: inset 0 0 0 var(--p) var(--bg); } }
这里用了 2 个动画：grow 负责将元素缩放出来；melt 负责“融化”元素（即消除阴影的扩散半径）
<div> <div></div> ...(此处省略14个 list-item) <div></div> </div>
.list { &.grow-melt { .list-item { --t: 2s; animation-name: grow, melt; animation-duration: var(--t); animation-iteration-count: infinite; } } } @keyframes grow { 0% { transform: scale(0); } 50%, 100% { transform: scale(1); } } @keyframes melt { 0%, 50% { box-shadow: inset 0 0 0 var(--p) var(--bg); } 100% { box-shadow: inset 0 0 0 0 var(--bg); } }
计算出元素下标的中位数
计算每个元素 id 到这个中位数的距离
根据距离算出比例
根据比例算出 delay
<div> <div></div> ...(此处省略14个 list-item) <div></div> </div>
.list { &.middle-stagger { .list-item { --m: #{middle(var(--n))}; // 中位数，这里是7.5 --i-m-dist: #{dist-1d(var(--i), var(--m))}; // 计算每个id到中位数之间的距离 --ratio: calc(var(--i-m-dist) / var(--m)); // 根据距离算出比例 --delay: calc(var(--ratio) * var(--t)); // 根据比例算出delay --n-delay: calc((var(--ratio) - 2) * var(--t)); // 负delay表示动画提前开始 animation-delay: var(--n-delay); } } }
初始状态
如何将一维的升成二维？应用网格系统即可
<div> <div></div> ...(此处省略62个 grid-item) <div></div> </div>