使用 anim.js 通过 SVG 变形以非常简单的方式添加暗模式
使用 anim.js 通过 SVG 变形以非常简单的方式添加暗模式
通过一些小的 SVG 变形向网站添加暗模式可能会增强您的用户体验。
Light mode-Dark mode
所以，让我们开始吧
今天我们将学习如何以一种非常简单的方式为网站添加暗模式。唯一的前提是你应该有基本的知识 Html、CSS、Js 和 Figma（仅用于变形 SVG）。
这是我的 HTML
<!DOCTYPE htmtoggle-darkmode-btnl> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黑暗模式</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="main-wrapper"> <div class="svg-wrapper"> <svg id="toggle-darkmode-btn" width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="sun" d="M53 26.5C53 41.1355 41.1355 53 26.5 53C11.8645 53 0 41.1355 0 26.5C0 11.8645 11.8645 0 26.5 0C41.1355 0 53 11.8645 53 26.5Z" fill="#FFA31A"/> </svg> </div> <h1>点击我切换暗模式</h1> <p>在您的网站中添加暗模式非常容易</p> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="./index.js"></script> </html>
步骤1： 将所有颜色存储在您将在网站中使用的变量中。 例如，我在这里使用 3 种颜色。首先是正文背景颜色、标题颜色和文本颜色。 所以我会将所有这 3 种颜色存储在光照模式的类名中的变量中。我还将在暗模式类中重新定义这些变量的颜色，以便我们可以切换亮模式和暗模式的类。你可以在图片中看到。
.lightMode{ --标题颜色：RGB（13、84、94）； --text-color:hsla(0, 0%, 0%, 0.822); --main-bg:hsl(0, 0%, 97%); } .darkMode{ --标题颜色：rgb（61、193、211）； --text-color:hsla(0, 23%, 95%, 0.986); --main-bg:hsl(0, 0%, 4%); }
是的，这就是你对 CSS 所做的一切。但是现在您正在考虑如何在标签中使用这些变量。例如，如果我想制作 h1 标签的深天蓝色，那么我将通过简单地编写 CSS 来实现 颜色：var（-标题颜色）。 而已。
.lightMode{ --标题颜色：RGB（13、84、94）； --text-color:hsla(0, 0%, 0%, 0.822); --main-bg:hsl(0, 0%, 97%); } .darkMode{ --标题颜色：rgb（61、193、211）； --text-color:hsla(0, 23%, 95%, 0.986); --main-bg:hsl(0, 0%, 4%); } 身体{ 背景颜色：var（--main-bg）； 显示：弯曲； 对齐项目：居中； 证明内容：中心； 高度：100vh； } .main-wrapper{ 显示：弯曲； 对齐项目：居中； 证明内容：中心； 弹性方向：列； } .svg-包装器{ 边界半径：50%； 填充：0.5rem； 盒子阴影：0px 0px 5px 0px var(--heading-color); } #toggle-darkmode-btn{ 光标：指针； } h1{ 字体大小：3rem； 颜色: var(--heading-color); } p{ 字体大小：1.8em； 颜色: var(--text-color); 文本对齐：居中； }
第2步 : 现在让我们转到 js 部分。这里首先我们要在页面加载时将lightMode的className添加到body中。所以我们必须运行window.onload函数，我们将className设置为body的lightMode。因此，当页面加载时，它会加载 lightMode 类。
window.onload = () =>{ document.body.className = 'lightMode' }
现在，将通过使用查询选择器并向其添加单击事件来获取 SVG。
常量 toggleDarkModeBtn = document.getElementById('toggle-darkmode-btn'); 常量 sunPath =“M53 26.5C53 41.1355 41.1355 53 26.5 53C11.8645 53 0 41.1355 0 26.5C0 11.8645 11.8645 0 26.5 0C41.1355 0 53 11.8645 53 26.” const moonPath = "M19.5 26.5C19.5 41.1355 42.1355 53 27.5 53C12.8645 53 0.957825 41.1355 0.957825 26.5C0.957825 11.8645 14.7711 0 27.5 0C44.0422 0 19.5 11.8645 19.5 26.5Z"; 常量 sunFill = '#FFA31A'; const moonFill = '#F3F3F1' 让 lightMode = true; toggleDarkModeBtn.addEventListener('click',(e)=>{ 如果（灯光模式）{ document.body.className = 'darkMode'; 光模式=假 }别的{ document.body.className = 'lightMode'; 光模式=真 } 常量 tl = 动漫时间线（{ 缓动：'easeOutExpo'， 持续时间：350 }); tl.add({ 目标：'.sun'， d:[{value:lightMode?sunPath:moonPath}], 填充：[{value:lightMode?sunFill:moonFill}] }); }); window.onload = () =>{ document.body.className = 'lightMode' }
现在我们必须设置最初为 true 的变量 lightMode。因为用户没有设置暗模式。因此，当用户第一次单击 toggleDarkModeBtn 时，我们将检查 if(lightMode) 表示亮模式为真，然后我们将主体 className 更改为暗模式并将 lightMode 的值更新为假，因为用户选择了暗模式。然后用户第二次单击，这意味着用户想要设置 lightMode，此时 lightmode 值已经为 false，因此它将检查我们将 body 类更改为 lightMode 的 else 条件并更新 lightMode 变量的值。
第三步： 现在让我们转向 SVG 的变形。首先，您必须在 figma 中创建太阳 svg，这非常简单，只需选择椭圆并使用 shift 拖动它并为其着色。然后左键单击它并选择选项flatten，然后选择复制/粘贴作为选项，并在其中选择复制为svg。
然后将其粘贴到 html 中，并将 id 提供给 svg 标签 切换暗模式-btn 添加点击事件并在路径标签中给出 sun 的类名，使用 anim.js 对其进行标记，然后返回 figma 并复制 sun 以将其变成月亮。并对月亮重复相同的步骤。
然后你去 js 并存储 d 月亮 svg 的值和它的填充颜色并删除月亮 svg 中的其他东西。您不必将其粘贴到 html 中，也不必将 sun svg 的这些值用于反向功能月亮到太阳和太阳到月亮。
我们将在 anim.js 的帮助下变形 svg 以使其平滑。所以复制 anim.js 的 cdn 并粘贴到 html 的底部。之后，我们将声明变形的时间线以使其平滑。
然后我们将动画添加到 sun svg 所以目标在这里是太阳（目标作为 querselector 工作，所以它将选择太阳类）然后我们将把太阳的路径更改为月亮，如果 lightMode 也填充颜色为假（表示用户已选择暗模式），否则路径 lightMode 为真，表示用户已选择光模式，因此将所有这些值更改为太阳。
你还在吗！希望你明白了。
想提出任何建议：-
看一下 我的投资组合
Emial 我 [email protected]。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
