这是一个 炫酷带有星星✨的按钮效果，主要通过 CSS 和 SVG 创建一个具有视觉吸引力的按钮，结合了动画、渐变和交互效果。
复制源代码到空白的html格式文件，在浏览中打开运行即可。
<a class="dazzle fluid" href="#">
<svg
aria-hidden="true"
viewBox="0 0 96 96"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
fill="#000"
/>
</svg>
<svg
aria-hidden="true"
viewBox="0 0 96 96"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
fill="#000"
/>
</svg>
<svg
aria-hidden="true"
viewBox="0 0 96 96"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
fill="#000"
/>
</svg>
<svg
aria-hidden="true"
viewBox="0 0 96 96"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
fill="#000"
/>
</svg>
<svg
aria-hidden="true"
viewBox="0 0 96 96"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M93.781 51.578C95 50.969 96 49.359 96 48c0-1.375-1-2.969-2.219-3.578 0 0-22.868-1.514-31.781-10.422-8.915-8.91-10.438-31.781-10.438-31.781C50.969 1 49.375 0 48 0s-2.969 1-3.594 2.219c0 0-1.5 22.87-10.406 31.781-8.908 8.913-31.781 10.422-31.781 10.422C1 45.031 0 46.625 0 48c0 1.359 1 2.969 2.219 3.578 0 0 22.873 1.51 31.781 10.422 8.906 8.911 10.406 31.781 10.406 31.781C45.031 95 46.625 96 48 96s2.969-1 3.562-2.219c0 0 1.523-22.871 10.438-31.781 8.913-8.908 31.781-10.422 31.781-10.422Z"
fill="#000"
/>
</svg>
<!-- End sparkles -->
<span class="fluid">按 钮!</span>
<span class="fluid" aria-hidden="true">按 钮!</span>
</a>
以下是对其效果、实现原理和可能应用场景的详细说明：
效果
- 炫彩按钮：按钮在用户悬停或点击时会产生动态的视觉效果，包括文本阴影、背景渐变和动画。
- 交互反馈：按钮的状态变化（如悬停、点击）通过 CSS 动画和过渡效果进行视觉反馈，增强用户体验。
- SVG图标：按钮中包含 SVG 图标，提供清晰的视觉指示，增强可用性。
实现原理
- HTML结构：使用
<button>元素和<output>元素构建按钮的界面。按钮中包含 SVG 图形，表示增加和减少的图标。 - CSS样式：
- 使用 CSS 变量定义动画的持续时间、缓动函数和颜色，便于管理和修改。
- 使用
@keyframes创建滑入和滑出动画，增强视觉效果。 - 使用
mix-blend-mode和backdrop-filter来实现视觉效果的叠加和模糊。
应用场景
- 用户界面：可以用作网页或应用程序中的按钮，适用于各种操作，如提交表单、切换状态等。
- 游戏：在游戏中用作操作按钮，提供用户与游戏的交互。
- 数据展示：在数据仪表板中使用，展示实时数据的变化，例如用户活动、销售数据等。
