基于 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 变量和样式，以满足你的设计偏好。您可以调整颜色、大小和动画持续时间，以适应项目的主题。