已标记的文章

切换动画的开启和关闭

Kirupa 提供了一个详细的教程，介绍了如何提供具有持久选项的 UI 来控制动画是否运行。

诀窍是使用控制运动的自定义属性

body {
  --toggle: 0;
  --playState: "paused";

…

Chris Coyier 于 2019 年 1 月 9 日

这让我困惑了一段时间，所以我在记忆还新鲜的时候把它写下来。仅仅因为你使用了一个 Web 组件，并不意味着它的样式完全隔离。你可能在一个 Web 组件中拥有内容...

Chris Coyier 于 2020 年 1 月 10 日

有一种观点认为将数学计算留在 CSS 中是一个好主意，我同意这种观点。这是针对你在创作时可以计算的数学，但你特意选择不计算。例如，如果你需要...

Chris Coyier 于 2018 年 12 月 13 日

我认为看到 Google 发布有趣的 Web 组件库很酷。它展示了酷炫的新 Web 功能的可能性，并允许他们以与完全 Web 标准兼容的方式发布这些功能。

这里有一个例子：...

Chris Coyier 于 2018 年 12 月 10 日

这是两部分系列文章中的第二篇，探讨了如何使用 CSS 变量来简化复杂布局和交互的代码编写，并使其更容易维护。第一篇...

Ana Tudor 于 2018 年 12 月 6 日

这是两部分系列文章中的第一篇，探讨了如何使用 CSS 变量来简化复杂布局和交互的代码编写，并使其更容易维护。这篇第一篇...

Ana Tudor 于 2018 年 12 月 6 日

假设你想要在鼠标悬停在元素上时移动元素的 background-position，以使设计更加生动。你有一个像这样的元素

<div class="module" id="module"></div>

并在上面添加一个背景

.module

…

Chris Coyier 于 2018 年 10 月 4 日

这里有一个 CSS 变量（正式称为“CSS 自定义属性”）

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

也许你用它们来设置一个位置

.mover {
  left: var(--mouse-x);
  top: var(--mouse-y);
}

要从 JavaScript 更新这些值，...

Chris Coyier 于 2018 年 9 月 12 日

不久前，我写了一篇关于将 CSS 变量与 CSS 网格结合起来以帮助构建更易于维护的布局的文章，反响很好。但 CSS 网格并不仅仅适用于页面！这是一个常见的误解。虽然它确实非常有用...

Michelle Barker 于 2018 年 9 月 5 日