文章标签

插值数值 CSS 变量

我们可以轻松地在 CSS 中创建变量

:root {
  --scale: 1;
}

我们可以在任何元素上声明它们：…

Geoff Graham 于 2022 年 9 月 1 日

前几天我在 Apple Arcade 上玩了一个叫做wurdweb的游戏。这是一个有趣的小游戏！像在屏幕上走动的小形状人物（但除此之外没有任何作用）这样的细节让它更有…

Chris Coyier 于 2021 年 11 月 30 日

我最近演示了如何使用cubic-bezier()实现复杂的 CSS 动画，以及如何在 CSS 过渡中做到同样的事情。我能够创建复杂的悬停效果，而无需使用关键帧。在本文中，我…

Temani Afif 于 2021 年 7 月 14 日

Geoff 分享了这个想法，关于一个棋盘格，其瓷砖逐个消失以显示图像。在其中，一个元素具有背景图像，然后 CSS 网格布局包含“瓷砖”，它们从填充的背景颜色变为…

Temani Afif 于 2021 年 3 月 23 日

嗯，什么是@property？这是一个新的 CSS 功能！它赋予你超级能力。说真的，@property 可以做一些事情，这些事情在 CSS 中以前从未实现过。

虽然关于@property 的一切都很令人兴奋，…

Jhey Tompkins 于 2021 年 3 月 4 日

这个用于渐变边框的小技巧非常有用

.border-gradient {
  border: 5px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
}

Chris Coyier 于 2021 年 2 月 8 日

数字动画，比如，想象一个数字从 1 变为 2，然后 2 变为 3，然后 3 变为 4，等等，在指定的时间内。就像一个计数器，但由我们用于…的相同类型的动画控制。

Carter Li 于 2020 年 10 月 9 日

Una Kravetz 深入探讨了Chrome 如何现在允许你直接从 CSS 声明 CSS 自定义属性，并提供比仅仅一个字符串更多信息。…

Chris Coyier 于 2020 年 9 月 2 日

@property 对我来说是全新的，但我看到它即将在 Chrome 中发布，所以我想知道它！

存在一个草案规范和一个“发布意向文档”。来自该文档的代码…

Chris Coyier 于 2021 年 11 月 12 日