基于 CSS 实现的一个具有可拉伸弹性效果的开关切换按钮，该按钮可在 "开 "和 "关 "状态之间切换，它通过 CSS 动画来拉伸按钮，支持自定义颜色、大小及动画持续时间，此外，您还可以使用此代码在网站或网络应用程序上创建时尚的切换按钮，它能增加互动性，增强用户体验。
下面展示如何在 CSS 中创建具有可伸缩弹性效果的切换按钮
1.首先，我们来设置 HTML 结构。我们需要一个类名为 "toggle "的 <div> 元素，其中包含一个具有唯一 ID 的 <input> 元素和一个具有与输入链接的 "for "属性的 <label> 元素。
<div class="toggle"> <input type="checkbox" id="btn"> <label for="btn"> <span class="thumb"></span> </label> </div>
2.接下来，我们将添加 CSS 来设计切换按钮的样式，我们将为按钮定义颜色、大小和动画。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
.toggle {
position: relative;
width: calc(var(--sz) * 4);
height: calc(var(--sz) * 2);
display: flex;
align-items: center;
justify-content: center;
}你可以随意定制 CSS 变量和样式，以满足你的设计偏好。您可以调整颜色、大小和动画持续时间，以适应项目的主题。
