本文介绍了 CSS 中“@property”规则的用法,该功能允许开发人员在 CSS 中显式声明自定义属性的语法、初始值和继承。 作者解释了“@property”如何通过允许浏览器解释和动画自定义属性更改来提供不同状态之间的更平滑的转换。 他们使用 codepen 演示了这一点,展示了通过精心设计的“圆锥渐变”、“线性渐变”和“@keyframe”动画组合实现的旋转渐变和闪亮边框效果。 作者还讨论了设置“background-origin”以及调整自定义属性的“syntax”和“initial-value”等技术,以创建各种视觉效果。 此外,他们还探索了在悬停事件期间使渐变旋转更慢的方法,在按钮内创建微小的闪烁点,并对其外观进行微妙的增强。 最后,他们对“@property”在更大规模的应用程序和设计系统中的潜在用途表示兴奋。 文章结尾提供了有用资源的链接。 总结如下: 在本文中,作者演示了如何使用 CSS 中的“@property”规则在网页中创建动态且具有视觉吸引力的效果。 使用自定义属性和“圆锥渐变”、“线性渐变”和“动画”的巧妙组合,作者创建了旋转渐变和闪亮边框效果。 讨论的技术包括使用“background-origin”、调整语法和初始值、使悬停事件时渐变旋转得更慢、创建微小的闪烁点以及增强悬停事件的外观。 总体而言,作者将“@property”视为一种令人兴奋的工具,用于增强网页中的用户交互,特别是用于设计号召性用语和其他图形元素。 本文最后提供了进一步学习和探索的有用链接。