百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

有趣的 CSS 数学函数

myzbx 2025-03-07 22:13 20 浏览

前言

之前一直在玩 three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 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)};
}

三角函数

其实这个也不会实现~不过之前看到过 一篇文章[1]写到了如何在 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);
}

例子

以下的几个动画特效演示了上面数学函数的作用

一维交错动画

初始状态

创建一排元素，用内部阴影填充，准备好我们的数学函数


  

  ...(此处省略14个 list-item)
  




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 负责“融化”元素（即消除阴影的扩散半径）

  

  ...(此处省略14个 list-item)
  




.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);
  }
}

交错动画

  1. 计算出元素下标的中位数
  2. 计算每个元素 id 到这个中位数的距离
  3. 根据距离算出比例
  4. 根据比例算出 delay

  

  ...(此处省略14个 list-item)
  




.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);
    }
  }
}

地址：Symmetric Line Animation[2]

二维交错动画

初始状态

如何将一维的升成二维？应用网格系统即可


  

  ...(此处省略62个 grid-item)
  




.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);
  }
}

应用动画

跟上面的动画一模一样


  

  ...(此处省略62个 grid-item)
  




.grid {
  &.grow-melt {
    .grid-item {
      --t: 2s;

      animation-name: grow, melt;
      animation-duration: var(--t);
      animation-iteration-count: infinite;
    }
  }
}

交错动画

  1. 计算出网格行列的中位数
  2. 计算网格 xy 坐标到中位数的距离并求和
  3. 根据距离算出比例
  4. 根据比例算出 delay

  

  ...(此处省略62个 grid-item)
  




.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[3]

另一种动画

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


  

  ...(此处省略254个 grid-item )
  




.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[4]

余弦波动动画

初始状态

创建 7 个不同颜色的（这里直接选了彩虹色）列表，每个列表有 40 个子元素，每个子元素是一个小圆点

让这 7 个列表排列在一条线上，且 z 轴上距离错开，设置好基本的 delay


  

    

    ...(此处省略39个 list-item)
  

  ...(此处省略6个 list)



.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%;
    }
  }
}

余弦排列

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

.lists {
  .list {
    &-item {
      $item-count: 40;
      $offset: pi() * 0.5;
      --wave-length: 21vw;

      @for $i from 1 through $item-count {
        &:nth-child(#{$i}) {
          --i: #{$i};
          $ratio: ($i - 1) / ($item-count - 1);
          $angle-unit: pi() * $ratio;
          $wave: cos($angle-unit + $offset);
          --single-wave-length: calc(#{$wave} * var(--wave-length));
          --n-single-wave-length: calc(var(--single-wave-length) * -1);
        }
      }

      transform: translateY(var(--n-single-wave-length));
    }
  }
}

波动动画

对每个小圆点应用上下平移动画，平移的距离就是余弦的波动距离

.lists {
  .list {
    &-item {
      --t: 2s;

      animation: wave var(--t) infinite ease-in-out alternate;
    }
  }
}

@keyframes wave {
  from {
    transform: translateY(var(--n-single-wave-length));
  }

  to {
    transform: translateY(var(--single-wave-length));
  }
}

交错动画

跟上面一个套路，计算从中间开始的 delay，再应用到动画上即可

.lists {
  .list {
    &-item {
      --n: #{$item-count + 1};
      --m: #{middle(var(--n))};
      --i-m-dist: #{dist-1d(var(--i), var(--m))};
      --ratio: calc(var(--i-m-dist) / var(--m));
      --square: calc(var(--ratio) * var(--ratio));
      --delay: calc(
        calc(var(--square) + var(--basic-delay-ratio) + 1) * var(--t)
      );
      --n-delay: calc(var(--delay) * -1);

      animation-delay: var(--n-delay);
    }
  }
}



CSS 数学函数能实现的特效远不止于此，希望通过本文能激起大家创作特效的灵感~

参考资料

[1]在 CSS 中使用三角函数绘制曲线图形及展示动画:
https://github.com/chokcoco/iCSS/issues/72

[2]Symmetric Line Animation: https://codepen.io/alphardex/pen/vYmqvpe

[3]Symmetric Grid Animation: https://codepen.io/alphardex/pen/zYwgdZO

[4]Shuffle Grid Animation: https://codepen.io/alphardex/pen/YzVmYaV

[5]Rainbow Sine: https://codepen.io/alphardex/pen/GREKJbL

相关推荐

男人的内裤，到底可以穿多久?（男人内裤最多能穿几天）

女生们如果家里有男生可能会发现——他们对内裤很恋旧穿到褪色松垮穿到别有洞天穿到一网情深穿到人间蒸发都仍然...舍不得这位老伙计男生们到底有多热爱旧内裤？有外国媒体曾在街头采访，发现：女士们往往会随...

typeof 与 instanceof 区别（typeof与instanceof区别）

typeof操作符返回一个字符串，表示未经计算的操作数的类型使用方法如下：typeofoperandtypeof(operand)operand表示对象或原始值的表达式，其类型将被返回举个例子...

年纪轻轻病情就已是晚期!你还敢再喝这种饮料吗?

本文作者：谢祥成，浙江大学医学院附属邵逸夫医院肾内科主任医师吴俊男，浙江大学医学院附属邵逸夫医院肾内科主治医师30岁的金先生（化名）是一名才华横溢的设计师。半年前出现视物模糊，起初以为是用眼过度，没有...

typeof 与 instanceof 有什么区别

typeof和instanceof是JavaScript中用于类型检查的两个操作符，但它们的用途和适用场景有显著区别。以下是它们的区别及使用注意事项：1.typeof作用：返回一个变量的基本...

数据结构之顺序表（数据结构顺序表图书管理系统）

线性表定义线性表是n(n≥0)个具有相同特性的数据元素的有限序列。记作：（a1,a2,…,ai-1,ai,ai+1,…,an）线性表相关概念直接前驱元素：ai-1领先于ai,称a...

每一个成熟的人，都需要具备「翻篇」这种能力

“翻篇儿”——仿佛读出这个儿化音，才够表达那种潇洒的感觉是一种人生中非常重要的心理过程和心理技能。人生注定不完美，我们只要活着就会遭遇不愉快的经历，只有及时翻篇儿，才能把更多注意力放在当下，不被过去的...

打通 JAVA 与内核系列之 一 ReentrantLock 锁的实现原理

写JAVA代码的同学都知道，JAVA里的锁有两大类，一类是synchronized锁，一类是concurrent包里的锁（JUC锁）。其中synchronized锁是JAVA语言层面提供的能力，在此不...

韩国吃货主播，美食声控咀嚼音，你是搬运工，好吃到停不下来

刘姐畅谈。Hey，Hongsi。TodaywehaveassortedtoysthatImade。Foryouguysfirst。Itlookscrunchybecause...

黄子韬2019新歌最好的我们完整歌词介绍在哪可以听

最好的我们(TheBestofUs)-黄子韬词：黄子韬曲：黄子韬编曲：DarylK制作人：DarylK助理制作：郭舒文和音：黄子韬电吉他：CalvinC木吉他：雷十一录音室：Kong...

刷一道LeetCode -- 三数之和（三数之和算法）

原题：https://leetcode-cn.com/problems/3sum/给你一个包含n个整数的数组nums，判断nums中是否存在三个元素a，b，c，使得a+b+c...

隐藏在阳光当中的地球刺客（隐藏在阳光下的秘密）

小行星什么时候会撞击地球？这一直是大家比较关注的问题，特别是当大家知道地球上前一任住户是亡于小行星之后，就更加关注这个问题了。图1尤卡坦半岛的陨石坑（NASA）实际上，地球每天都会遭受到一些天体的袭...

安卓手机爱奇艺app中离线视频导出

安卓手机爱奇艺app中离线视频导出：通常我在爱奇艺中发现好的视频，想保存下来，点击离线缓存，缓存好后，在手机上可以查看，但是使用手机连接电脑打开后，发现保存视频的文件夹是空的。1)在手机中爱奇艺文...

50款经典奥斯汀月季，超多图片，抗病好养新手必种的月季

【50款经典奥斯汀月季】大家好，今天来给大家介绍50款经典的奥斯汀月季，奥斯汀是一位伟大的育种家，以他命名的奥斯汀公司也繁育出了数量众多的月季品种。根据木木的种植经验，奥斯汀的月季大多植株长势良...

你也想像J姐一样在梦幻芭比大house里“哭泣”吗?

“6年前我的兜里只揣着400元美金，现如今我已经住上了这上亿豪宅”他是一个我行我素，敢说敢做的一个网红博主他测评过的彩妆都卖断货了他的自创同名品牌深受好评他就是JeffreeStar，你们传说中的J...

VB Do While\Until，Loop循环语句

DoWhile\Until…….Loop循环语句上一节讲了For……Next循环语句，这节讲DoWhile\Until…….Loop循环语句。有人会有疑问，既然有For循环，还要Do循环干什么？它...

一周热门
最近发表
标签列表