这段代码使用纯 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 属性。您可以调整按钮的颜色、字体和粒子动画，以适应您网站的主题。
