七夏 发表于 2024-10-28 09:45:18

炫酷星星按钮效果(附源码)

这是一个 **炫酷带有星星✨的按钮效果**，主要通过 CSS 和 SVG 创建一个具有视觉吸引力的按钮，结合了动画、渐变和交互效果。

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/mmbiz_gif/f0eLpDCYMyibe45IUIgic6ne1PERaJNSYcIE6CUuvfxpHNSCFa1jC9fwX7GBe0fmwkne8WJ7wCic0bFzsG1roVBFQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1)


复制源代码到空白的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 图标，提供清晰的视觉指示，增强可用性。

### 实现原理

1. **HTML结构**：使用 `<button>` 元素和 `<output>` 元素构建按钮的界面。按钮中包含 SVG 图形，表示增加和减少的图标。
2. **CSS样式**：

   * 使用 CSS 变量定义动画的持续时间、缓动函数和颜色，便于管理和修改。
   * 使用 `@keyframes` 创建滑入和滑出动画，增强视觉效果。
   * 使用 `mix-blend-mode` 和 `backdrop-filter` 来实现视觉效果的叠加和模糊。

### 应用场景

* **用户界面**：可以用作网页或应用程序中的按钮，适用于各种操作，如提交表单、切换状态等。
* **游戏**：在游戏中用作操作按钮，提供用户与游戏的交互。
* **数据展示**：在数据仪表板中使用，展示实时数据的变化，例如用户活动、销售数据等。
页: [1]
查看完整版本: 炫酷星星按钮效果(附源码)