CSS calc()函数与单位vh 常见height：100vh

html-css013

CSS calc()函数与单位vh 常见height：100vh,第1张

calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算；

举例，给一个div动态设置宽度如下:

vh，是指css中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。

视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。

通俗点讲，vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%

前言

之前一直在玩three.js ，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在 CSS 中也用上这些数学函数，但发现 CSS 目前还没有，据说以后的新规范会纳入，估计也要等很久。

然而，我们可以通过一些小技巧，来创作出一些属于自己的CSS 数学函数，从而实现一些有趣的动画效果。

让我们开始吧！

注意 ：以下的函数用原生 CSS 也都能实现，这里用 SCSS 函数只是为了方便封装，封装起来的话更方便调用

绝对值就是正的还是正的，负的变为正的

可以创造 2 个数，其中一个数是另一个数的相反数，比较它们的最大值，即可获得这个数的绝对值

原数减 1 并乘以一半即可

数轴上两点距离就是两点所表示数字之差的绝对值，有了上面的绝对值公式就可以直接写出来

其实这个也不会实现~不过之前看到过 一篇文章[1] 写到了如何在 CSS 中实现三角函数，在此表示感谢

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

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

这里用了 2 个动画：

地址： Symmetric Line Animation[2]

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

跟上面的动画一模一样

地址： Symmetric Grid Animation[3]

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

地址： Shuffle Grid Animation[4]

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

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

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

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

跟上面一个套路，计算从中间开始的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

vh: 相对于视窗的高度, 视窗被均分为100单位的vh

vw: 相对于视窗的宽度, 视窗被均分为100单位的vw

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

视区：所指为浏览器内部的可视区域大小，

即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

calc是 css3提供的一个在css文件中计算值的函数：

用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 “+”, “-“, “*”, “/” 运算；

calc()函数使用标准的数学运算优先级规则；

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小

calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

一般用来设置流式布局宽高，当然，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值

calc()的兼容性需要注意