这段代码使用纯 CSS 创建了一个 "重力按钮"，该按钮具有动画粒子，并可通过复选框调整例子的运动速度，展示了一种按钮吸引周边粒子集中到按钮的动画效果，该动画效果支持按钮颜色、大小以及粒子动画的自定义，它有助于增加按钮的视觉吸引力。您可以在各类需要交互式按钮的页面中使用此代码，它为您的用户界面添加了动态视觉元素，而无需依赖 JavaScript。

下面展示如何使用纯 CSS 创建重力按钮

1.首先，在 HTML 文档的 head 标签中引入以下链接，加载 Google 字体和 Prefixfree JS（浏览器兼容css样式用的，不必须）。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Orbitron&display=swap" rel="stylesheet">
<script src="./js/prefixfree.min.js"></script>

2.设置 HTML 结构。您需要一个输入复选框和一个用于控制按钮速度的标签，以及一个用于重力按钮本身的按钮元素。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
<input id="slow" type="checkbox"/>
<label for="slow">slow motion</label>
<button>...</button>

3.接下来，添加以下 CSS 代码。该 CSS 将处理重力按钮及其粒子的外观和动画效果。它包括按钮、粒子和动画效果的样式。

/*这里仅展示部分示例代码，下载后查看完整版代码*/
@charset "UTF-8";
@property --k {
  syntax: "<number>";
  initial-value: -1;
  inherits: true;
}
button {
  --m: 1;
  grid-area: 2/1/span 1/span 2;
  position: relative;
  margin: 1em;
  border: solid 2em transparent;
  padding: 1.5em 3.25em;
  border-radius: 5em;
  box-shadow: inset 0 0 1px #23429e;
  background: radial-gradient(#111a39, 67.5%, #3476da) padding-box, radial-gradient(#a0c2ed, 35%, #a0c2ed00 70%) 50% 0/80% 50% repeat-y;
  color: #f2fdfe;
  font: 700 1.5em/1 montserrat, sans-serif;
}

您可以根据自己的设计偏好自定义 CSS 属性。您可以调整按钮的颜色、字体和粒子动画，以适应您网站的主题。