本文最初发表于
https://notarena.com/

此代码创建一个动画切换按钮，通过添加或删除 body 元素上的“深色”类来在浅色和深色模式之间切换。切换按钮有一个圆圈，可平滑过渡以指示模式，机身背景也可平滑过渡以提供无缝体验。

我使用态射效果，按钮和背景有一个漂亮的过渡，为切换开关增添了一丝优雅。这种类型的切换按钮可用于各种网站或应用程序，特别是那些可能需要浅色和深色模式以获得更好的可访问性或只是为用户提供不同设计选项的网站或应用程序。

你可能会喜欢这个

• 分享按钮动画
• 自定义单选按钮

要使用 HTML、CSS 和 JavaScript 创建切换按钮，您需要创建两个文件：一个 HTML 文件和一个 CSS 文件。创建这些文件后，您可以将提供的代码复制并粘贴到其中。您也可以复制所有源代码。

在 HTML CSS 和 JavaScript 中创建切换按钮
创建文件夹：首先为您的项目创建一个文件夹。您可以将其命名为任何您喜欢的名称。在此文件夹中，您需要创建以下文件：

index.html（用于创建切换按钮的结构）
style.css（用于设置“创建切换按钮”的样式）
创建 HTML 文件：

将您的 HTML 文件命名为 index.html。
创建 CSS 文件：

将您的 CSS 文件命名为 style.css.
创建 JavaScript 文件：

将您的 JavaScript 文件命名为 script.js.