文章标签

Netflix 的浏览页面设计几年来一直保持着很高的相似度。其中一个主要组成部分是预览滑块，它允许用户滚动浏览内容，并在项目上悬停以查看预览。

一个独特的特征是……

Firefox 72 最先推出了“独立变换”。也就是说，我们无需将变换组合在一起，例如

.el {
  transform: translate(10px, 10px) scale(0.95) rotate(10deg);
}

...我们可以这样做

.el {
  rotate: 10deg;
  scale: 0.95;
  translate: 10px 

今年早些时候，我偶然发现 这个演示，它是由 Florin Pop 制作的，它可以让一条线在单行标题的字母上或下移动。我认为这是一个很酷的想法，但是有一些小的细节...

我最近注意到 CodePen 上发生了一个有趣的变化：当在首页上悬停在画笔上时，在后面有一个圆角矩形正在扩展。...

我一直致力于一个网站，该网站向用户展示大型图片。我决定尝试制作一些不那么典型的东西，而不是为这些大型图片创建典型的灯箱效果（带有黑色叠加层的放大动画）...

我已经玩了五年多的 CSS 变换，我一直困扰的一件事是我无法分别为变换链的组件添加动画。这篇文章将解释这个问题，旧的...

当我看到 这篇文章 的内容时，我的第一个想法是，可以用预处理器，尤其是 CSS 变量来简化这一切。让我们深入了解它，看看它是如何实现的！...

Dan Wilson 记录了一个与变换相关的经典烦恼

button {
  transform: translateY(-150%);
}
button:hover {
  /* will (perhaps unintentionally) override the original translate */
  transform: scale(.8);
}

原生的（也是 WET 的）解决方案是再次列出原始变换

button:hover {