掌握高级CSS技术：深入了解过渡、动画和变换

CSS 不再只是让网站看起来更漂亮。它已经发展成为一种工具，能让网站栩栩如生地呈现出曾经被认为不可能实现的动作和交互。

因此，本指南将帮助你快速掌握三种强大的功能：过渡、动画和变换。对于那些已经掌握了 CSS 基础知识，并希望创建出与众不同、经得起时间考验的网站的网页设计师和开发人员来说，了解和使用这些高级技术是必不可少的。

在学习本指南的过程中，你将获得宝贵的技能，让你的网站项目超越平凡。希望你还能从中获得一些灵感。

高级 CSS 过渡

高级 CSS 过渡可使用户界面元素具有交互性、吸引力和美观性。想象一下，你的网站上有一个按钮。通常情况下，它只是静静地放在那里，但如果使用 CSS 过渡技术，当有人将鼠标悬停在它上面时，它就会平滑地改变颜色或增大一些。

这个概念围绕着插值的概念展开 – 在 CSS 属性的不同状态之间平滑过渡。

要创建这些效果，你需要熟悉几个 CSS 属性：

• 过渡属性：这些属性包括指定要制作动画的属性（如 background-color 或 opacity）、设置过渡的持续时间，以及决定transition-timing-function (如 ease-in 或 linear)，该函数决定了过渡在持续时间内的进展方式。
• 定时函数：这些函数是必须的，因为它们可以控制过渡的加速和减速。其中最通用的选项之一是 cubic-bezier 函数。该函数可以创建自定义的速度曲线，让你完全控制转场的节奏。一开始可能会有些棘手，但贝塞尔曲线函数等工具可以让您更轻松地可视化和创建这些曲线。

cubic-bezier 的一个应用实例。

下面是一个简单的示例，说明如何在 CSS 中使用该函数：

.my-element {
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

在此代码段中，.my-elementwill 将通过 cubic-bezier 函数定义的独特速度曲线来改变其不透明度。这条曲线决定了一种特定的移动方式，比如开始时速度较慢，然后加快，最后减慢。

使用带有自定义值的 transition-timing-function ，你可以让网页元素的移动方式感觉更自然、更动态，或者与标准方式完全不同。这是为网页动画增添个性和精细度的绝佳工具。

说到高级技术，这里有几种值得考虑：

1. 同时处理多个属性：为什么只为一件事设置动画？CSS 可让您将多个属性排成一行，并同时为它们制作动画。这非常适合为动画添加层次。
2. 同步动画：你还可以将不同的属性排成一行，以相同的速度移动，从而产生更加协调的效果。
3. 嵌套过渡：将过渡应用到容器中的元素。这样，当你与容器进行交互时，子元素就会按照你的喜好进行操作。

确保这些动画不仅美观，而且运行流畅，尤其是在性能较弱的设备上。使用 transform 和 opacity 等属性是一个明智之举，因为这些属性对浏览器来说更容易使用，而且不会对性能造成太大影响。

此外，使用 will-change 属性为浏览器提个醒，有助于浏览器做好准备，确保一切运行顺畅。

最后要说明的是，要确保在任何地方都能正常运行：浏览器可能很挑剔。使用供应商前缀有助于确保你的炫酷过渡效果在不同浏览器中都能正常运行。虽然会有一些额外的工作，但自动前缀器等工具可以帮你处理这些工作，让你省心省力。

CSS 变换

CSS 变换是为网页设计增添趣味的好方法。当然，它们可以用来移动东西，也可以改变页面的整体感觉。在这里，transform 属性是你的主要角色。

它用途广泛，可以将元素从一个位置移动到另一个位置，比如在屏幕上滑动图片或改变图片大小–就像放大或缩小照片一样，让图片看起来更近或更远。如果你想玩得更花哨一些，还可以让元素旋转起来。

真正让人印象深刻的是加入 3D 变换函数。利用  translate3d, scale3d, 和 rotate3d 等函数，元素可以跳出屏幕，在浏览器中创造更身临其境的体验。

以翻转卡片效果为例。这是一个很好的功能，卡片的一面显示特定信息，翻转后，另一面会显示新的内容。这种互动元素能真正吸引访客的注意力。

实现这种效果的关键在于有效使用 backface-visibility 属性。这可以确保卡片背面在需要查看之前保持隐藏状态。

但为什么要止步于此？当你将这些变换与转场和动画融合在一起时，你就能从 CSS 中获得更多。你可以让一个按钮在悬停时优雅地变大，或者让一个图标在屏幕上俏皮地移动。这些动态变化为你的网页元素增添了流动的特质，让用户体验更加引人入胜。

Designmodo 提供了几个漂亮的实例。首先，你可以看到 3D 变换的 CSS 分解。然后，您可以看到代码的实际应用：

Designmodo 提供了一个出色的 3D 变换示例

容器查询

容器查询是 CSS 值得探索的另一个方面。通过容器查询，你可以根据容器的大小而不是整个屏幕的大小来为元素设计样式。可以这样想：你有一个盒子，无论盒子有多大或多小，你都希望里面的东西看起来漂亮。容器查询就很好地解决了这个问题。

当你想让网页的不同部分（如边栏或卡片）根据空间大小改变外观时，容器查询就非常方便。每个组件都可以决定自己的风格，与页面的其他部分无关。

下面简要介绍一下如何使用它们：

• 设置容器：首先，告诉 CSS 页面的哪个部分是容器。这需要使用 container-type 和 container-name 等属性。
• 编写查询：就像媒体查询一样，不过是针对容器。你要写一条规则，”嘿，如果我的容器至少有这么宽，那么就做这些样式更改”。

这就是基本代码的样子：

@container (min-width: 300px) {
.component {
/* styles */
}
}

在此示例中，当容器的最小宽度达到 300px 时，将应用 .component 类中的样式。

现在，容器查询可用于各种情况，例如：

• 响应式边栏和页脚：根据容器大小调整侧边栏或页脚的宽度和布局。
• 响应式卡片：根据容器的宽度改变网格或柔性框布局中卡片的布局或样式

虽然包括 Chrome、Firefox、Safari 和 Edge 在内的主流浏览器都支持容器查询，但将其用作渐进增强仍不失为一种好的做法。对于不支持容器查询的浏览器，从基本样式开始，然后再对支持容器查询的浏览器进行增强。

使用 Flexbox 进行垂直对齐

在 CSS 中，Flexbox 是一种非常方便的工具，尤其是在垂直对齐方面。虽然它已经存在了一段时间，但仍然非常实用，尤其是在沿横轴对齐项目时（根据你的布局，横轴可以是垂直的）。

使用对齐项垂直对齐

Flexbox 中的 align-items 属性是在容器内垂直对齐项目的首选。当你的 flex 容器具有行的 flex-direction 时，它就会起作用。通过该属性，您可以控制 flex 容器的所有子项如何沿横轴对齐。

例如，如果你在一个 flex 容器中放置了许多项目，并希望它们都垂直居中，你可以使用  align-items: center;。以下是使用 align-items 的主要选项：

• flex-start: 将项目对齐到容器的起始位置。
• flex-end: 将项目对齐到容器的末端。
• center: 对齐容器中的项目居中。
• baseline: 根据基线对齐项目。
• stretch: 拉伸项目以填充容器（默认行为）。

使用 align-self 进行单独控制

虽然 align-items 非常适合对齐容器中的所有项目，但有时你只想以不同的方式对齐一个项目。这就是 align-self 为何如此有用的原因。通过该属性，你可以覆盖单个 flex 项目的 align-items 值。它接受的值与 align-items 相同。

例如，假设你有一个 align-items: center 的 flex 容器，但有一个项目你想对齐到起始位置。你可以将 align-self: flex-start; 应用于该特定项目。这是精确控制单个项目对齐的好方法。

不过，在实际操作中使用这种方法会更有帮助。

比方说，你正在设计一个带有徽标、链接和搜索栏的导航栏。你希望链接居中，徽标对齐到顶部，搜索栏对齐到底部。

你可以这样做：

.nav-container {
display: flex;
flex-direction: row;
align-items: center;
}
.logo {
align-self: flex-start;
}
.search-bar {
align-self: flex-end;
}

在本例中，.nav-container 是一个 flex 容器，其项目一般居中。然而，徽标和搜索栏却打破了这一常规，分别对齐到了容器的起始和末尾。

CSS 中的现代颜色函数

CSS 中的现代色彩函数有了长足的发展，为网页设计中定义和处理色彩提供了更复杂的方法。让我们深入了解其中的一些函数：

1. rgb() 和 rgba()

rgb() 函数是使用红、绿、蓝通道定义颜色的传统方法。每个通道的值在 0 到 255 之间。 rgba() 变体增加了一个不透明的 alpha 通道，1 表示完全不透明，0 表示完全透明。

看起来应该是这样的：

.example {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}

2. hsl() 和 hsla()

hsl() 用色相、饱和度和亮度表示颜色，使选择颜色变化更加直观。与 rgba() 一样， hsla() 也包含一个不透明的 alpha 通道。就像这样：

.example {
color: hsl(120, 100%, 50%); /* Green */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
}

3. oklch() 和 oklab()

 oklch() 和 oklab() 是 CSS 颜色函数的最新成员。它们基于 CIELAB 色彩空间，该色彩空间旨在实现感知上的统一。这意味着颜色值的变化更接近人眼感知到的变化。

现在，具体来说：

•  oklab() 用于在感知统一空间中定义颜色。
•  oklch() 与之类似，但使用的是圆柱坐标（亮度、色度和色调）。

通过这些函数，可以更准确、更直观地操作颜色，尤其是创建平滑的颜色渐变等任务。以下是代码形式：

.example {
color: oklch(75%, 0.25, 250); /* A color in oklch */
background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
}

实现高级配色方案

使用这些函数，尤其是更高级的 oklch() 和 oklab()，您可以实现复杂的色彩方案，使其在视觉上保持一致并具有吸引力。它们可以对颜色的呈现和感知方式进行更多控制，确保您的设计既美观又易于使用。

将这些颜色函数与自定义属性（CSS 变量）和计算等 CSS 功能相结合，就能开发出动态、灵活的颜色系统，以适应不同的主题、状态和环境。

随着网络标准和浏览器对这些功能的支持不断变化，采用这些现代色彩功能可以显著增强网络项目的视觉设计和用户体验。

文字包围图片

CSS shape-outside 属性提供了一种创造性的方法，用于将文本包绕在图片周围，从而使布局更有活力、视觉效果更有趣，并能实现更高级的图片样式。

它允许你定义一个形状，让内联内容围绕该形状展开。这对于以非矩形形状将文字包裹在图片周围非常有用，可以创建比标准矩形文字包裹更有机、更有视觉吸引力的布局。

如何使用？

你可以定义各种形状，如圆形、椭圆形和多边形，甚至可以使用图像的 alpha 通道来决定形状。

shape-outside 属性通常适用于浮动元素。当你浮动图像并应用 shape-outside 属性时，文本会根据定义的形状围绕图像展开。

下面是一个使用 shape-outside 的圆形的基本示例：

.image {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 15px;
}

在本例中， .image 类应用于图像元素。它被浮动到左侧， shape-outside: circle(50%); 创建了一个圆形，文字将围绕该圆形展开。有效使用 shape-outside 可以为你的设计带来新的可能性，因为它允许文字围绕复杂的形状流动，从而可以创建类似杂志的布局和视觉丰富的网页。

CSS 混合模式

CSS 混合模式提供了一种强大的方式来混合颜色和图像，创造出独特的视觉效果，同时还能增强设计效果。通过这些混合模式，你可以创建引人入胜的文字效果、图像叠加和复杂的背景图案。要使用 background-blend-mode，我们先来了解一下它的作用。该属性用于定义元素的背景图片和颜色应如何混合在一起。例如，如果你有一张背景图片和一种背景颜色，你可以使用不同的混合模式将它们混合在一起，如乘法、屏幕、叠加等。代码是这样的：

.element {
background-image: url('image.jpg');
background-color: blue;
background-blend-mode: multiply;
}

现在，mix-blend-mode 的工作原理是将元素的内容（包括图像和文本）与其背景混合。这对于文字效果或在另一张图片上叠加图片特别有用。就像这样

<
.element {
mix-blend-mode: screen;
}

常用混合模式

以下是正确使用该特效所需的几种最常用的混合模式，供您参考：

• 叠加：将混合图层和基础图层的颜色叠加，使颜色更暗。
• 滤色：使颜色变浅，与乘法相反。它适用于制作浅色效果。
• 叠层：结合了叠加和滤色混合模式。图片的亮部变亮，暗部变暗。
• 变暗和变亮：分别选择较暗或较亮的颜色。
• 色彩减淡和色彩加深：使基色变浅或变深，以反映混合色。
• 差异和排除：用于创建更具艺术性的反转色彩效果。

适应用户偏好

在网页设计中适应用户偏好是创建无障碍和用户友好型网站的一个重要方面。在这一过程中，针对偏好（如 prefers-color-scheme 和 prefers-reduced-motion ）的 CSS 媒体查询发挥着重要作用。

让我们来探讨一下这些概念。

prefers-color-scheme

该媒体查询用于检测用户是否要求系统使用浅色或深色主题。这是一种在网站设计中实现深色模式的便捷方法。

您可以使用 prefers-color-scheme 为浅色和深色模式指定不同的样式。

例如：

/* Default light mode styles */
body {
background-color: white;
color: black;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}

在此代码段中，默认样式适用于浅色模式，而 @media 查询中的样式则适用于用户偏好深色方案的情况。

prefers-reduced-motion

该媒体查询用于检测用户是否要求系统尽量减少动画或动作的使用量。这对于晕动病或前庭失调的用户来说至关重要。

您可以使用 prefers-reduced-motion 来减少或移除动画和过渡效果：

/* Standard animations */
.animate {
transition: transform 0.3s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.animate {
transition: none;
}
}

在这里，你会看到当用户表示偏好减少动作时，动画就会被禁用。

在 CSS 中加入 prefers-color-scheme 和 prefers-reduced-motion 是向更具包容性和用户友好型网络迈出的一步，可确保具有不同需求和偏好的广大用户都能轻松访问网站。

使用 :is() 和 :where() 伪选择器

CSS 中的 :is() 和 :where() 伪选择器是管理特异性和简化复杂选择器链的高级工具。让我们来探索它们的工作原理，并看看一些实际例子。

:is() 伪选择器

该选择器允许你用一条规则针对多个元素，并减少了类似选择器的重复。 :is() 伪类的特异性是其参数中最特异的选择器的特异性。

/* Selects any paragraph or heading inside an article */
article :is(h1, h2, h3, p) {
color: blue;
}

:where() 伪选择器

它与 :is() 类似，但有一个主要区别： :where() 的特异性总是为零。这使得它可以在不增加特异性的情况下覆盖样式。在使用中，它可能看起来像这样：

/* Selects any paragraph or heading, but with no added specificity */
:where(article, section) p {
margin-bottom: 1em;
}

使用 :is() 和 :where() 可以制作出更灵活、更易维护的样式表，尤其是在处理复杂设计时。例如，如果您需要，这些伪选择器可能会很有用：

• 简化嵌套选择器：它们可以简化深度嵌套的选择器或分组选择器，使 CSS 更易读、更易维护。
• 覆盖样式： :where() 是创建基础样式的绝佳工具，可以轻松覆盖，而不必担心样式的特殊性。
• 重复使用样式：这两种伪选择器都允许使用更多模块化和可重用的样式，因为你可以在一条规则下组合各种元素。

在实际应用中，可以想象一个包含不同部分的导航菜单。您可以使用 :is() 对菜单中的所有链接（无论其嵌套级别如何）统一样式，如下所示：

nav :is(ul, ol, div) > li > a {
padding: 10px;
color: white;
}

小结

从让用户界面栩栩如生的优雅 CSS 过渡到强大的 3D 变换，希望你现在已经对 2024 年及以后可用的一些更高级 CSS 技术有了更好的了解。

本指南阐明了这些高级技术，并强调了它们在制作反应灵敏、用户友好、视觉效果吸引人的网页设计中的重要性。无论你决定使用哪种技术，都要记住在所有工作中优先考虑可访问性和 CSS 性能。

你目前使用过这些高级 CSS 技术吗？有推荐他人尝试的建议吗？请随时告诉我们。