CSS 函数指南

url()

.el {
  background: url(/images/image.jpg);
}

attr()

/* <div data-example="foo"> */
div {
  content: attr(data-example);
}

calc()

.el {
  width: calc(100vw - 80px);
}

lang()

p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019";
}

:not()

h3:not(:first-child) {
  margin-top: 0;
}

:nth-child()

.el:nth-child(3n) {
  background-color: #eee;
}

nth-child() 允许你定位文档对象模型 (DOM) 树中同一级别上的一组元素中的一個或多个元素。

在正确的人手中，:nth-child() 非常强大。你甚至可以用它 解决 FizzBuzz 问题！如果你正在寻找一个好的入门方法，Chris 有 一个有用的伪选择器食谱集合。

:nth-last-child()

.el:nth-last-child(2) {
  opacity: 0.75;
}
.el:last-child {
  opacity: 0.5;
}

此伪类选择器定位 DOM 中同一级别上的一组元素中的一个或多个元素。它从组中的最后一个元素开始计数，并向后遍历可用 DOM 节点的列表。

:nth-of-type()

h2:nth-of-type(odd) {
  text-indent: 3rem;
}

:nth-of-type() 匹配给定类型的元素的指定集合。例如，声明 img:nth-of-type(5) 将定位页面上的第五张图片。

:nth-last-of-type()

section:nth-last-of-type(3) {
  background-color: darkorchid;
}

此伪类选择器可以定位类似类型的一组元素中的一个元素。与 :nth-last-child() 非常相似，它从组中的最后一个元素开始计数。与 :nth-last-child 不同，它会跳过不适用的元素，因为它向后工作。

cubic-bezier()

.el {
  transition-timing-function: 
    cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

你可以使用 cubic-bezier() 来创建动画的自定义计时函数，而不是像 ease、ease-in-out 或 linear 这样的关键字值。虽然你可以 阅读有关驱动三次贝塞尔曲线的数学知识，但我认为 尝试制作一个 会更有意思。

path()

.clip-me {
  clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
}
.move-me {
  offset-path: path("M56.06,227 ...");
}

此函数与 offset-path 属性 （或 最终，clip-path 属性）配对。它允许你“绘制”一个 SVG 路径，其他元素可以被动画设置为跟随它。

Michelle Barker 和 Dan Wilson 都发布了关于这种动画方法的详细文章。

steps()

.el {
  animation: 2s infinite alternate steps(10);
}

这个相对较新的函数允许你设置动画的缓动时间，这使得你能够更好地控制动画的哪一部分在什么时候发生。Dan Wilson 有 另一篇关于它如何融入现有动画缓动场景的优秀文章 。 

scaleX()，scaleY()，scaleZ()，scale3d()，以及scale()

.double {
  transform: scale(2);
}

缩放函数允许你沿一个或多个轴增加或减小某个东西的大小。如果你使用scale3d()，你甚至可以在三个维度上做到这一点！

translateX()，translateY()，translateZ()，translate3d()，以及translate()

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

平移函数允许你沿一个或多个轴重新定位元素。与缩放函数类似，你也可以将这种操作扩展到三个维度。

perspective()

.cube {
  transform: perspective(50em) rotateY(50deg)
}

这个函数 允许你调整对象的外观，使其看起来像从背景中突出并向外投影。

rotateX()，rotateY()，rotateZ()，rotate3d()，以及rotate()

.avatar {
  transform: rotate(25deg);
}

旋转函数允许你沿一个或多个轴旋转元素，就像抓住一个球并在手中转动它一样。

skewX()，skewY()，以及skew()

.header {
  transform: skew(25deg, 15deg);
}

倾斜函数与缩放和旋转函数略有不同，因为它们相对于一个点应用扭曲效果。扭曲的程度与声明的角度和距离成比例，这意味着效果在某个方向上持续的时间越长，它就越明显。 

Jorge Moreno 也为我们做了好事，并制作了一个很棒的工具，叫做 CSS 变换函数可视化器 。它允许你实时调整尺寸和缩放，以便更好地理解所有这些函数是如何协同工作的。

作为负责任的网络专业人士，我们应该注意我们的用户，以及他们可能没有使用新的或强大的硬件来查看我们的内容这一事实。大型和复杂的动画可能会减慢体验速度，甚至在极端情况下导致浏览器崩溃。

为了防止这种情况，我们可以使用 will-change 之类的技术来 为浏览器准备即将发生的事情 ，以及 update 媒体特征 在不支持快速刷新率的设备上删除动画。 

brightness()

.avatar:hover {
  filter: brightness(150%);
}

此函数调整某物看起来的亮度。将其设置为较低的值将使其看起来像在其上投下了阴影。将其设置为较高值将使其亮度过高，就像曝光过度的照片一样。

blur()

.ghost {
  filter: blur(50%);
}

如果你熟悉 Photoshop 的 高斯模糊 滤镜，你就知道blur() 的工作原理。你应用的越多，你应用它的东西看起来就越模糊。

contrast()

.wow {
  filter: contrast(200%);
}

contrast() 将调整应用于内容的最亮部分和最暗部分之间的差异程度。

grayscale()

.no-color {
  filter: grayscale(100%);
}

grayscale() 从它所应用的内容中删除颜色信息。记住，这不是一个全有或全无的事情！你可以应用部分灰度效果，使某物看起来风化或褪色。

grayscale() 的一个有趣的应用可能是 在启用深色模式时稍微应用它到图像 ，在用户可能希望减少眼睛疲劳的情况下，稍微降低颜色的整体活力。

invert()

虽然 invert() 可用于使某些内容看起来像照片底片，但我最喜欢的技巧是在 反转颜色媒体查询 中使用它来反转反转的图像和视频

@media (inverted-colors: inverted) {
  img,
  video {
    filter: invert(100%);
  }
}

这可确保图像和视频内容无论用户的浏览模式偏好如何都能以预期的方式显示。 

opacity()

.filter-visibility {
  filter: opacity(0);
}

此函数控制应用该函数的元素（和子元素）的背景在多大程度上可见。 

不透明度为 0% 的元素将完全透明，尽管它仍然存在于 DOM 中。如果您需要完全删除对象，请使用其他技术，例如 隐藏属性。

saturate()

.full-color {
  filter: saturate(100%);
}

应用此过滤器可以增强或降低应用对象颜色的强度。增强图像的饱和度是摄影师用来修复曝光不足的照片的一种常见技巧。

sepia()

.is-old-timey {
  filter: sepia(1);
}

有更复杂的方法来描述它，但实际上它是一个使某些内容看起来像老式照片的函数。

drop-shadow()

.fit-shape-shadow {
  filter: drop-shadow(3rem 0 0.5rem #e486da);
}

下拉阴影是一种应用于对象的视觉效果，使其看起来像悬浮在页面上。这里有一点技巧，即 CSS 也允许您将下拉阴影效果应用于 文本 和 元素。它不同于 box-shadow 属性，因为它 将下拉阴影应用于元素的形状 而不是元素的实际框。

熟练的设计师和开发人员可以利用这一点来创建复杂的视觉效果。

hue-rotate()

.change-color {
  filter: hue-rotate(180deg);
}

当包含 hue-rotate() 声明的类应用于元素时，用于绘制该元素的每个像素的色调值将按您指定的量进行偏移。hue-rotate() 的效果应用于它应用的每个像素，因此所有颜色将相对于其色调值的起始点更新。

当应用于包含大量颜色信息的内容（如照片）时，这会产生一种非常迷幻的效果。

SVG 过滤器

filter() 还允许我们导入 SVG 过滤器以用于创建 专门的视觉效果。这个主题太复杂了，无法在本文中详细介绍——如果您正在寻找一个好的起点，我建议您阅读 Dirk Weber 撰写的“SVG 过滤器的艺术及其为何如此出色”。