文章标签

我之前偶然发现了一些 类似 动画，这给了我一个想法，用尽可能少的代码，无需外部库，使用各种方法，其中一些利用了更多…

单个 div 元素很少会动画。如果您能转换 div 或其伪元素，那就可以了（就像 Lynn Fisher 对她的精彩作品 BB-8 所做的那样）。但您不能直接更改您在 div 内创建的单个“元素”的 opacity 或 transform，因为它们不是实际的 DOM 元素。

我坚信尝试一些与众不同且有趣的事情，以学习那些您可能永远不会学习的工具。使用单个 div 的限制可能不适合生产工作，但它可以成为一个很好的练习（和挑战），以一种有趣的方式扩展您的技能。本着这种精神，我们将使用这种技术来探索自定义属性（CSS 变量）的工作原理，甚至为我们在 div 内的动画提供一条途径。

我知道那里有很多纯 CSS 立方体教程。我自己也做过一些。但对于 2017 年中期，当 CSS 自定义属性在所有主要桌面浏览器中都得到支持时，它们都感觉……过时了，并且非常 冗长。…

CSS 现在有自定义属性了。我们 最近写了很多关于它们的文章。浏览器支持 很好，但当然，旧的非常绿浏览器（如 Internet Explorer）没有这些属性，而且永远不会有。我能理解使用…

CSS 自定义属性（也许更容易理解为 CSS 变量）为我们提供了使代码更简洁的方法，以及引入了以前不可能的 CSS 工作方式。它们可以做预处理器变量可以做的事情…

我们不久前发布了关于原生 CSS 变量（自定义属性）和预处理器变量之间区别的文章。预处理器变量可以做一些原生变量不能做的事情，但总的来说，原生变量可以做…

CSS 自定义属性使我们能够进入属性值并更改其某些部分。这在许多地方都很有用，但特别是在无法以其他方式更改属性的情况下很有用。

Dan Wilson 记录了变换的经典烦恼

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

原生（和冗长）的解决方案是再次列出原始变换

button:hover {
  

前几天我偶然发现了一个有趣的问题。我想使用随机的 animation-duration 对元素进行动画处理。…