使用 JavaScript 动态实时更改 CSS 变量值并且实时显示效果

    通过 JavaScript 代码可以更改 HTML 中的 CSS 属性变量值，并实时更新页面的样式，其核心功能包括使用滑块和颜色选择器等输入元素动态更改 CSS 变量，该轻量级控件可以让用户实时控制间距、颜色和模糊效果，从而增强用户体验。使用起来也多功能简单，只需要为项目创建 HTML 结构，在 <div class="controls"> 中，添加滑块和颜色选择器等元素，这些元素将允许用户与 CSS 变量进行交互，后续再把下载后的css以及js文件引入项目即可

<main class="cd__main">
    <!-- Start DEMO HTML (Use the following code into your project)-->
    <h2>使用<span class="hl">JS</span>更新CSS属性</h2>

    <div class="controls">
        <label for="spacing">内边距:</label>
        <input
                data-sizing="px"
                id="spacing"
                max="200"
                min="10"
                name="spacing"
                type="range"
                value="10"
        />

        <label for="blur">模糊程度:</label>
        <input
                data-sizing="px"
                id="blur"
                max="25"
                min="0"
                name="blur"
                type="range"
                value="10"
        />

        <label for="base">基础颜色</label>
        <input id="base" name="base" type="color" value="#ffc600"/>
    </div>

    <img src="img/ZfXM8MbxoM.jpg"/>
    <!-- END EDMO HTML (Happy Coding!)-->
</main>