DaisyUI Aura 组件完全指南为按钮、卡片添加旋转光晕边框效果【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuiAura 是 DaisyUI 提供的一种组件级视觉效果在元素边框外环绕一圈动态光源让页面中最重要的按钮、卡片或 div 一眼可见。本指南以 Aura 组件说明 为骨架结合 aura.css 源码实现 与官方文档示例完整讲解类名体系、五种光效风格、五种尺寸档位、颜色与动画时长自定义规则并深入剖析其锥形渐变、模糊层与--aura-angle变量驱动的底层原理读完即可在项目中正确、克制地使用 Aura。Aura 是什么Aura 在组件边框外侧添加一层旋转的光效light effect默认表现为沿边框循环旋转的渐变光带用于把页面上最重要的按钮、卡片或普通 div 突出出来。它不是独立可见的块级组件而是一个包裹容器——必须有一个直接子元素作为被照亮的内容。在 DaisyUI 中Aura 的核心样式由 aura.css 提供组件类名为aura其典型结构如下div classaura {MODIFIER}{CONTENT}/div其中{MODIFIER}可选可同时包含风格类与尺寸类各一个{CONTENT}是被包裹的直接子元素。类名体系Aura 的类名分为三组容器组件类、风格类、尺寸类。组件类component类名作用aura容器元素默认提供旋转边框光效rotating border风格类style类名作用aura-dual双光效旋转光带只覆盖部分圆周aura-rainbow彩虹色光效aura-holo全息色彩光效aura-gold金色光效aura-silver银色光效aura-glow呼吸辉光效果替代默认的旋转边框尺寸类size类名作用aura-xs特小尺寸光晕内边距 0aura-sm小尺寸aura-md中尺寸默认值aura-lg大尺寸aura-xl特大尺寸从源码看尺寸差异由--aura-padding变量驱动见 aura.css 第 133-157 行aura-xs→--aura-padding: 0remaura-sm→--aura-padding: 0.0625remaura-md→--aura-padding: 0.125rem与基础值一致因此默认即为 mdaura-lg→--aura-padding: 0.15625remaura-xl→--aura-padding: 0.25rem内边距越大光带离子元素越远、视觉效果越舒展。基本用法Aura 的用法是在任意元素外层套一个带aura类的容器。官方文档 Aura 页面/components/aura/page.md) 给出了最常用的两种场景。为卡片添加 Auradiv classaura div classcard bg-base-100 div classcard-body pThis card has aura/p /div /div /div为按钮添加 Auradiv classaura button classbtnbutton with aura/button /div为定价卡片添加 Aura实战组合把 Aura 与 DaisyUI 的card、badge、btn组合使用可以做出营销页中常见的最受欢迎套餐高亮效果div classaura aura-rainbow div classcard w-96 bg-base-100 shadow-sm div classcard-body span classbadge badge-xs badge-warningMost Popular/span div classflex justify-between h2 classtext-3xl font-boldPremium/h2 span classtext-xl$29/mo/span /div ul classmt-6 flex flex-col gap-2 text-xs liHigh-resolution image generation/li liCustomizable style templates/li /ul div classmt-6 button classbtn btn-primary btn-blockSubscribe/button /div /div /div /div五种光效风格默认旋转边框无需风格类仅写aura时光效由conic-gradient(from var(--aura-angle), transparent 225deg, currentColor)生成见 aura.css 第 11 行以--aura-angle为起始角前 225° 透明、剩余部分用currentColor填充形成一个跟随角度变量旋转的光点。aura-dual双光效div classaura aura-dual div classcard bg-base-100 div classcard-body pThis card has dual aura/p /div /div /div源码中 aura-dual 使用repeating-conic-gradient在 0–40% 透明、50% 处currentColor即一条圆周上只覆盖部分角度的光带与默认单光点形成双段光的视觉差异。aura-rainbow彩虹光效div classaura aura-rainbow div classcard bg-base-100 div classcard-body pThis card has rainbow aura/p /div /div /div源码 aura-rainbow 使用conic-gradient(... in oklch longer hue ...)在 OKLCH 色彩空间沿更长的色相路径从 0° 扫到 360°中间 10%–90% 为连续彩虹渐变、两端淡出透明。aura-holo全息光效div classaura aura-holo div classcard bg-base-100 div classcard-body pThis card has holo aura/p /div /div /div源码 aura-holo 使用repeating-conic-gradient在粉、紫、青、绿、黄等全息色之间循环并覆盖默认动画时长其默认--tw-duration为20s其余风格默认 6s。aura-gold 与 aura-silver金银光效div classaura aura-gold div classcard bg-base-100 div classcard-body pThis card has gold aura/p /div /div /div div classaura aura-silver div classcard bg-base-100 div classcard-body pThis card has silver aura/p /div /div /div金银两色均在源码中以 OKLCH 色值写死aura-gold 使用多段金色调aura-silver 使用多段中性灰阶模拟金属反光。aura-glow呼吸辉光div classaura aura-glow div classcard bg-base-100 div classcard-body pThis card has glow aura/p /div /div /divaura-glow 是唯一不旋转的风格其background-image为radial-gradient(closest-corner at center, currentColor 0%, transparent 90%)关闭外层旋转动画改为由aura-glow与aura-glow-after两个关键帧分别控制::before与::after的透明度与模糊半径周期性变化产生呼吸般的辉光。自定义颜色、背景色与动画时长Aura 默认使用currentColor作为光源色因此可以借助 Tailwind 的颜色工具类做三层自定义用 text-* 自定义光效颜色text-*颜色类会通过currentColor直接改变光效颜色div classaura text-orange-600 div classcard bg-base-100 text-base-content div classcard-body pThis card has custom color aura/p /div /div /div例如text-primary会把 Aura 设置为主题主色text-orange-600则设置为任意工具类颜色。用 bg-* 自定义背景颜色bg-*颜色类设置 Aura 容器的背景色div classaura text-orange-600 bg-yellow-200 div classcard bg-base-100 text-base-content div classcard-body pThis card has custom color and background aura/p /div /div /div例如bg-secondary会为 Aura 容器铺上 secondary 色背景。用 duration-* 自定义动画时长duration-*类通过 Tailwind 的--tw-duration变量覆盖动画速度div classaura aura-rainbow duration-2000 div classcard bg-base-100 div classcard-body p2000ms duration aura/p /div /div /divduration-1000将一圈旋转动画时长设为一秒duration-2000设为两秒。源码中所有动画时长均读取var(--tw-duration, 6s)兜底默认值holo 风格为 20s因此duration-*工具类可以精确覆盖默认时长。尺寸示例Aura 提供五档尺寸从紧凑到夸张依次为 xs、sm、md默认、lg、xldiv classaura aura-xs button classbtnXS/button /div div classaura aura-sm button classbtnSM/button /div div classaura button classbtnMD/button /div div classaura aura-lg button classbtnLG/button /div div classaura aura-xl button classbtnXL/button /div使用规则与注意事项官方说明给出了几条必须遵守的硬性规则{MODIFIER}可选且风格类与尺寸类各最多选一个自定义颜色使用text-*自定义背景使用bg-*自定义动画时长使用duration-*Aura 必须有一个直接子元素一个直接子节点Aura 适用于页面上最重要的按钮、卡片或 div同一页面不要对超过一个元素使用 Aura——多个 Aura 会让页面难以阅读。深入源码Aura 的实现原理理解了规则再看 aura.css 的实现能更好地掌控其行为边界。锥形渐变 角度变量的旋转机制基础.aura样式第 1-43 行做了四件事apply relative inline-block保证容器按内容收缩且可容纳绝对定位的子层--aura-padding: 0.125rempadding为光晕留出边距border-radius: calc(var(--aura-padding) var(--aura-radius, var(--radius-box)))让光带贴合子元素圆角background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor)生成旋转光带。旋转的关键在于property --aura-angle注册见 properties.cssproperty --aura-angle { syntax: angle; inherits: false; initial-value: 0deg; }配合关键帧动画 aurakeyframes aura { to { --aura-angle: 360deg; /* force GPU acceleration, fixes Safari lag */ transform: translateZ(1px); } }property注册让--aura-angle能被 CSS 动画逐帧插值从而驱动锥形渐变起点从 0deg 平滑旋转到 360degtranslateZ(1px)是源码注释明确标注的强制 GPU 加速、修复 Safari 卡顿的手段。双层模糊光晕.aura的::before与::after第 22-38 行继承同一份背景与动画分别以blur(0.25rem)透明度 0.7和blur(1rem)透明度 0.3叠加在内容下方z-0而直接子元素被提升到z-1从而形成内层清晰、外层弥散的光晕层次。圆角自适应Aura 会根据子元素类型自动匹配圆角变量第 13-21 行子元素是card或alert→ 使用--radius-box子元素是btn、input或select→ 使用--radius-field子元素是checkbox、toggle或badge→ 使用--radius-selector。这三个半径变量在 DaisyUI 主题变量中定义见 variables.css因此 Aura 的圆角会随主题配置自动联动。无障碍与降级所有旋转/辉光动画都包裹了media (prefers-reduced-motion: reduce)分支将动画时长放大 4 倍如默认 6s 变 24s、holo 的 20s 变 80s在用户系统开启减少动态效果时显著降低运动强度兼顾可访问性。总结Aura 是 DaisyUI 中高亮单个重要元素的专用组件aura容器 一个直接子元素配合aura-dual/rainbow/holo/gold/silver/glow六种风格、aura-xs/sm/md/lg/xl五档尺寸以及text-*、bg-*、duration-*三层自定义能力足以覆盖按钮、卡片、定价套餐等多种营销与产品场景。使用时务必遵守一页一个 Aura、必须有直接子元素的规则保持页面的可读性。其底层由 OKLCH 锥形渐变、property --aura-angle注册变量动画与双层模糊层协同驱动全部实现可在 aura.css 中完整查阅。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 DaisyUI Aura 组件完全指南：为按钮、卡片添加旋转光晕边框效果
DaisyUI Aura 组件完全指南为按钮、卡片添加旋转光晕边框效果【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyuiAura 是 DaisyUI 提供的一种组件级视觉效果在元素边框外环绕一圈动态光源让页面中最重要的按钮、卡片或 div 一眼可见。本指南以 Aura 组件说明 为骨架结合 aura.css 源码实现 与官方文档示例完整讲解类名体系、五种光效风格、五种尺寸档位、颜色与动画时长自定义规则并深入剖析其锥形渐变、模糊层与--aura-angle变量驱动的底层原理读完即可在项目中正确、克制地使用 Aura。Aura 是什么Aura 在组件边框外侧添加一层旋转的光效light effect默认表现为沿边框循环旋转的渐变光带用于把页面上最重要的按钮、卡片或普通 div 突出出来。它不是独立可见的块级组件而是一个包裹容器——必须有一个直接子元素作为被照亮的内容。在 DaisyUI 中Aura 的核心样式由 aura.css 提供组件类名为aura其典型结构如下div classaura {MODIFIER}{CONTENT}/div其中{MODIFIER}可选可同时包含风格类与尺寸类各一个{CONTENT}是被包裹的直接子元素。类名体系Aura 的类名分为三组容器组件类、风格类、尺寸类。组件类component类名作用aura容器元素默认提供旋转边框光效rotating border风格类style类名作用aura-dual双光效旋转光带只覆盖部分圆周aura-rainbow彩虹色光效aura-holo全息色彩光效aura-gold金色光效aura-silver银色光效aura-glow呼吸辉光效果替代默认的旋转边框尺寸类size类名作用aura-xs特小尺寸光晕内边距 0aura-sm小尺寸aura-md中尺寸默认值aura-lg大尺寸aura-xl特大尺寸从源码看尺寸差异由--aura-padding变量驱动见 aura.css 第 133-157 行aura-xs→--aura-padding: 0remaura-sm→--aura-padding: 0.0625remaura-md→--aura-padding: 0.125rem与基础值一致因此默认即为 mdaura-lg→--aura-padding: 0.15625remaura-xl→--aura-padding: 0.25rem内边距越大光带离子元素越远、视觉效果越舒展。基本用法Aura 的用法是在任意元素外层套一个带aura类的容器。官方文档 Aura 页面/components/aura/page.md) 给出了最常用的两种场景。为卡片添加 Auradiv classaura div classcard bg-base-100 div classcard-body pThis card has aura/p /div /div /div为按钮添加 Auradiv classaura button classbtnbutton with aura/button /div为定价卡片添加 Aura实战组合把 Aura 与 DaisyUI 的card、badge、btn组合使用可以做出营销页中常见的最受欢迎套餐高亮效果div classaura aura-rainbow div classcard w-96 bg-base-100 shadow-sm div classcard-body span classbadge badge-xs badge-warningMost Popular/span div classflex justify-between h2 classtext-3xl font-boldPremium/h2 span classtext-xl$29/mo/span /div ul classmt-6 flex flex-col gap-2 text-xs liHigh-resolution image generation/li liCustomizable style templates/li /ul div classmt-6 button classbtn btn-primary btn-blockSubscribe/button /div /div /div /div五种光效风格默认旋转边框无需风格类仅写aura时光效由conic-gradient(from var(--aura-angle), transparent 225deg, currentColor)生成见 aura.css 第 11 行以--aura-angle为起始角前 225° 透明、剩余部分用currentColor填充形成一个跟随角度变量旋转的光点。aura-dual双光效div classaura aura-dual div classcard bg-base-100 div classcard-body pThis card has dual aura/p /div /div /div源码中 aura-dual 使用repeating-conic-gradient在 0–40% 透明、50% 处currentColor即一条圆周上只覆盖部分角度的光带与默认单光点形成双段光的视觉差异。aura-rainbow彩虹光效div classaura aura-rainbow div classcard bg-base-100 div classcard-body pThis card has rainbow aura/p /div /div /div源码 aura-rainbow 使用conic-gradient(... in oklch longer hue ...)在 OKLCH 色彩空间沿更长的色相路径从 0° 扫到 360°中间 10%–90% 为连续彩虹渐变、两端淡出透明。aura-holo全息光效div classaura aura-holo div classcard bg-base-100 div classcard-body pThis card has holo aura/p /div /div /div源码 aura-holo 使用repeating-conic-gradient在粉、紫、青、绿、黄等全息色之间循环并覆盖默认动画时长其默认--tw-duration为20s其余风格默认 6s。aura-gold 与 aura-silver金银光效div classaura aura-gold div classcard bg-base-100 div classcard-body pThis card has gold aura/p /div /div /div div classaura aura-silver div classcard bg-base-100 div classcard-body pThis card has silver aura/p /div /div /div金银两色均在源码中以 OKLCH 色值写死aura-gold 使用多段金色调aura-silver 使用多段中性灰阶模拟金属反光。aura-glow呼吸辉光div classaura aura-glow div classcard bg-base-100 div classcard-body pThis card has glow aura/p /div /div /divaura-glow 是唯一不旋转的风格其background-image为radial-gradient(closest-corner at center, currentColor 0%, transparent 90%)关闭外层旋转动画改为由aura-glow与aura-glow-after两个关键帧分别控制::before与::after的透明度与模糊半径周期性变化产生呼吸般的辉光。自定义颜色、背景色与动画时长Aura 默认使用currentColor作为光源色因此可以借助 Tailwind 的颜色工具类做三层自定义用 text-* 自定义光效颜色text-*颜色类会通过currentColor直接改变光效颜色div classaura text-orange-600 div classcard bg-base-100 text-base-content div classcard-body pThis card has custom color aura/p /div /div /div例如text-primary会把 Aura 设置为主题主色text-orange-600则设置为任意工具类颜色。用 bg-* 自定义背景颜色bg-*颜色类设置 Aura 容器的背景色div classaura text-orange-600 bg-yellow-200 div classcard bg-base-100 text-base-content div classcard-body pThis card has custom color and background aura/p /div /div /div例如bg-secondary会为 Aura 容器铺上 secondary 色背景。用 duration-* 自定义动画时长duration-*类通过 Tailwind 的--tw-duration变量覆盖动画速度div classaura aura-rainbow duration-2000 div classcard bg-base-100 div classcard-body p2000ms duration aura/p /div /div /divduration-1000将一圈旋转动画时长设为一秒duration-2000设为两秒。源码中所有动画时长均读取var(--tw-duration, 6s)兜底默认值holo 风格为 20s因此duration-*工具类可以精确覆盖默认时长。尺寸示例Aura 提供五档尺寸从紧凑到夸张依次为 xs、sm、md默认、lg、xldiv classaura aura-xs button classbtnXS/button /div div classaura aura-sm button classbtnSM/button /div div classaura button classbtnMD/button /div div classaura aura-lg button classbtnLG/button /div div classaura aura-xl button classbtnXL/button /div使用规则与注意事项官方说明给出了几条必须遵守的硬性规则{MODIFIER}可选且风格类与尺寸类各最多选一个自定义颜色使用text-*自定义背景使用bg-*自定义动画时长使用duration-*Aura 必须有一个直接子元素一个直接子节点Aura 适用于页面上最重要的按钮、卡片或 div同一页面不要对超过一个元素使用 Aura——多个 Aura 会让页面难以阅读。深入源码Aura 的实现原理理解了规则再看 aura.css 的实现能更好地掌控其行为边界。锥形渐变 角度变量的旋转机制基础.aura样式第 1-43 行做了四件事apply relative inline-block保证容器按内容收缩且可容纳绝对定位的子层--aura-padding: 0.125rempadding为光晕留出边距border-radius: calc(var(--aura-padding) var(--aura-radius, var(--radius-box)))让光带贴合子元素圆角background-image: conic-gradient(from var(--aura-angle), transparent 225deg, currentColor)生成旋转光带。旋转的关键在于property --aura-angle注册见 properties.cssproperty --aura-angle { syntax: angle; inherits: false; initial-value: 0deg; }配合关键帧动画 aurakeyframes aura { to { --aura-angle: 360deg; /* force GPU acceleration, fixes Safari lag */ transform: translateZ(1px); } }property注册让--aura-angle能被 CSS 动画逐帧插值从而驱动锥形渐变起点从 0deg 平滑旋转到 360degtranslateZ(1px)是源码注释明确标注的强制 GPU 加速、修复 Safari 卡顿的手段。双层模糊光晕.aura的::before与::after第 22-38 行继承同一份背景与动画分别以blur(0.25rem)透明度 0.7和blur(1rem)透明度 0.3叠加在内容下方z-0而直接子元素被提升到z-1从而形成内层清晰、外层弥散的光晕层次。圆角自适应Aura 会根据子元素类型自动匹配圆角变量第 13-21 行子元素是card或alert→ 使用--radius-box子元素是btn、input或select→ 使用--radius-field子元素是checkbox、toggle或badge→ 使用--radius-selector。这三个半径变量在 DaisyUI 主题变量中定义见 variables.css因此 Aura 的圆角会随主题配置自动联动。无障碍与降级所有旋转/辉光动画都包裹了media (prefers-reduced-motion: reduce)分支将动画时长放大 4 倍如默认 6s 变 24s、holo 的 20s 变 80s在用户系统开启减少动态效果时显著降低运动强度兼顾可访问性。总结Aura 是 DaisyUI 中高亮单个重要元素的专用组件aura容器 一个直接子元素配合aura-dual/rainbow/holo/gold/silver/glow六种风格、aura-xs/sm/md/lg/xl五档尺寸以及text-*、bg-*、duration-*三层自定义能力足以覆盖按钮、卡片、定价套餐等多种营销与产品场景。使用时务必遵守一页一个 Aura、必须有直接子元素的规则保持页面的可读性。其底层由 OKLCH 锥形渐变、property --aura-angle注册变量动画与双层模糊层协同驱动全部实现可在 aura.css 中完整查阅。【免费下载链接】daisyui The most popular, free and open-source Tailwind CSS component library项目地址: https://gitcode.com/GitHub_Trending/da/daisyui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考