如何用 CSS 创作一个立体滑动 toggle 交互控件

心已赠人 2023-06-04 06:52 13阅读 0赞

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181119215615575-955213580.png][]

## 效果预览 ##

[**在线演示**][Link 1]

按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。

[https://codepen.io/zhang-ou/pen/zjoOgX][https_codepen.io_zhang-ou_pen_zjoOgX]

## 可交互视频教程 ##

**此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。**

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/c/cPvMzTg][https_scrimba.com_c_cPvMzTg]

## 源代码下载 ##

[**本地下载**][Link 2]

请从 github 下载。

[https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox][https_github.com_comehope_front-end-daily-challenges_tree_master_005-sleek-sliding-toggle-checkbox]

## 代码解读 ##

定义 dom，是嵌套了3层的容器：

居中显示：

html, 
    body,
    .checkbox,
    .checkbox .inner,
    .checkbox .inner .toggle {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

画出外侧椭圆：

.checkbox {
        width: 10em;
        height: 5em;
        background: linear-gradient(silver, whitesmoke);
        border-radius: 2.5em;
        font-size: 40px;
    }

画出内侧椭圆：

.checkbox .inner {
        width: 8em;
        height: 3.5em;
        background: linear-gradient(dimgray, silver);
        border-radius: 2em;
        box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.5);
    }

画出圆形按钮：

.checkbox .inner .toggle {
        width: 3.5em;
        height: 3.5em;
        background: linear-gradient(to top, silver, whitesmoke);
        border-radius: 50%;
        box-shadow: 0 0.4em 0.6em rgba(0, 0, 0, 0.2);
        position: relative;
        left: -30%;
    }

为圆形按钮增加立体效果：

.checkbox .inner .toggle::before {
        content: '';
        position: absolute;
        height: 80%;
        width: 80%;
        background: linear-gradient(whitesmoke, silver);
        border-radius: 50%;
    }

在按钮上写上 OFF，行高是根据父元素的高度计算出的：

.checkbox .inner .toggle::before {
        content: 'OFF';
        text-align: center;
        line-height: calc(3.5em * 0.8);
        font-family: sans-serif;
        color: gray;
    }

引入jquery：

编写脚本，在点击按钮时切换样式类：

$(document).ready(function() {
        $('.toggle').click(function() {
            $('.inner').toggleClass('active');
        });
    });

设置 active 时控件的样式:

.checkbox .inner.active {
        background: linear-gradient(green, limegreen);
    }
    
    .checkbox .inner.active .toggle {
        left: 30%;
    }
    
    .checkbox .inner.active .toggle::before {
        content: 'ON';
        color: limegreen;
    }

最后，为按钮设置缓动时间，实现动画效果

.checkbox .inner .toggle {
        transition: 0.5s;
    }

大功告成！

## 知识点 ##

*  linear-gradient() [https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient][https_developer.mozilla.org_en-US_docs_Web_CSS_linear-gradient]
 *  box-shadow [https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow][https_developer.mozilla.org_en-US_docs_Web_CSS_box-shadow]
 *  calc() [https://developer.mozilla.org/en-US/docs/Web/CSS/calc][https_developer.mozilla.org_en-US_docs_Web_CSS_calc]
 *  ::before [https://developer.mozilla.org/en-US/docs/Web/CSS/::before][https_developer.mozilla.org_en-US_docs_Web_CSS_before]
 *  jquery toggleClass [http://api.jquery.com/toggleclass/][http_api.jquery.com_toggleclass]

原文地址：[https://segmentfault.com/a/1190000014638655][https_segmentfault.com_a_1190000014638655]

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[img2018-cnblogs-com_blog_1504257_201811_1504257-20181119215615575-955213580.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181119215615575-955213580.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=wp-content/uploads/2018/11/front-end-daily-challenges-master/005-sleek-sliding-toggle-checkbox&demotitle=立体滑动%20toggle%20交互控件
[https_codepen.io_zhang-ou_pen_zjoOgX]: https://codepen.io/zhang-ou/pen/zjoOgX
[https_scrimba.com_c_cPvMzTg]: https://scrimba.com/c/cPvMzTg
[Link 2]: http://www.jqhtml.com/19195.html
[https_github.com_comehope_front-end-daily-challenges_tree_master_005-sleek-sliding-toggle-checkbox]: https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox
[https_developer.mozilla.org_en-US_docs_Web_CSS_linear-gradient]: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
[https_developer.mozilla.org_en-US_docs_Web_CSS_box-shadow]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
[https_developer.mozilla.org_en-US_docs_Web_CSS_calc]: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
[https_developer.mozilla.org_en-US_docs_Web_CSS_before]: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
[http_api.jquery.com_toggleclass]: http://api.jquery.com/toggleclass/
[https_segmentfault.com_a_1190000014638655]: https://segmentfault.com/a/1190000014638655