通过CSS数学函数实现动画特效(2)

.grid { $row: 8; $col: 8; --row: #{$row}; --col: #{$col}; --gap: 0.25vw; display: grid; gap: var(--gap); grid-template-rows: repeat(var(--row), 1fr); grid-template-columns: repeat(var(--col), 1fr); &-item { --p: 2vw; --bg: var(--blue-color-1); @for $y from 1 through $row { @for $x from 1 through $col { $k: $col * ($y - 1) + $x; &:nth-child(#{$k}) { --x: #{$x}; --y: #{$y}; } } } padding: var(--p); box-shadow: inset 0 0 0 var(--p) var(--bg); } }

应用动画

跟上面的动画一模一样

<div> <div></div> ...(此处省略62个 grid-item) <div></div> </div>

.grid { &.grow-melt { .grid-item { --t: 2s; animation-name: grow, melt; animation-duration: var(--t); animation-iteration-count: infinite; } } }

交错动画

计算出网格行列的中位数

计算网格 xy 坐标到中位数的距离并求和

根据距离算出比例

根据比例算出 delay

<div> <div></div> ...(此处省略62个 grid-item) <div></div> </div>

.grid { &.middle-stagger { .grid-item { --m: #{middle(var(--col))}; // 中位数，这里是7.5 --x-m-dist: #{dist-1d(var(--x), var(--m))}; // 计算x坐标到中位数之间的距离 --y-m-dist: #{dist-1d(var(--y), var(--m))}; // 计算y坐标到中位数之间的距离 --dist-sum: calc(var(--x-m-dist) + var(--y-m-dist)); // 距离之和 --ratio: calc(var(--dist-sum) / var(--m)); // 根据距离和计算比例 --delay: calc(var(--ratio) * var(--t) * 0.5); // 根据比例算出delay --n-delay: calc( (var(--ratio) - 2) * var(--t) * 0.5 ); // 负delay表示动画提前开始 animation-delay: var(--n-delay); } } }

地址：Symmetric Grid Animation

另一种动画

可以换一种动画 shuffle（穿梭），会产生另一种奇特的效果

<div> <div></div> ...(此处省略254个 grid-item ) <div></div> </div>

.grid { $row: 16; $col: 16; --row: #{$row}; --col: #{$col}; --gap: 0.25vw; &-item { --p: 1vw; transform-origin: bottom; transform: scaleY(0.1); } &.shuffle { .grid-item { --t: 2s; animation: shuffle var(--t) infinite ease-in-out alternate; } } } @keyframes shuffle { 0% { transform: scaleY(0.1); } 50% { transform: scaleY(1); transform-origin: bottom; } 50.01% { transform-origin: top; } 100% { transform-origin: top; transform: scaleY(0.1); } }

地址：Shuffle Grid Animation

余弦波动动画
初始状态

创建 7 个不同颜色的（这里直接选了彩虹色）列表，每个列表有 40 个子元素，每个子元素是一个小圆点
让这 7 个列表排列在一条线上，且 z 轴上距离错开，设置好基本的 delay

<div> <div> <div></div> ...(此处省略39个 list-item) </div> ...(此处省略6个 list) </div>

.lists { $list-count: 7; $colors: red, orange, yellow, green, cyan, blue, purple; position: relative; width: 34vw; height: 2vw; transform-style: preserve-3d; perspective: 800px; .list { position: absolute; top: 0; left: 0; display: flex; transform: translateZ(var(--z)); @for $i from 1 through $list-count { &:nth-child(#{$i}) { --bg: #{nth($colors, $i)}; --z: #{$i * -1vw}; --basic-delay-ratio: #{$i / $list-count}; } } &-item { --w: 0.6vw; --gap: 0.15vw; width: var(--w); height: var(--w); margin: var(--gap); background: var(--bg); border-radius: 50%; } } }

余弦排列

运用上文的三角函数公式，让这些小圆点以余弦的一部分形状进行排列