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

效果预览

在线演示

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

https://codepen.io/zhang-ou/pen/zjoOgX

可交互视频教程

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

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

https://scrimba.com/c/cPvMzTg

源代码下载

本地下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox

代码解读

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

&lt;div class="checkbox"&gt;

    &lt;div class="inner"&gt;

        &lt;div class="toggle"&gt;&lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

居中显示：

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：

&lt;script src="http://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;

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

$(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
box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
jquery toggleClass http://api.jquery.com/toggleclass/

原文地址：https://segmentfault.com/a/1190000014638655

巴特西

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

效果预览

可交互视频教程

源代码下载

代码解读

知识点

最新文章

热门文章