前端必学的CSS制作Switch动画开关按钮演示

news2024/9/28 10:08:28

目录

前言

CSS 制作的 Switch 动画开关按钮

1.Html构建

2.CSS编写

3.完整代码

index.html文件

style.css文件

总结

前言

        随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的CSS制作Switch动画开关按钮，赶紧学起来吧，加在自己开发网页的按钮选择处，给页面增加一点活泼的气息~

CSS 制作的 Switch 动画开关按钮

        

        这是一款使用纯 CSS 制作的 Switch 动画开关按钮，共 18 个，分为胶囊形和矩形两类，每个按钮都有自己独特的动画效果，看起来非常的逼真形象。（注意：演示中使用的字体为 10px，但 Chrome 以及 Chrome 内核的浏览器无法显示小于 12px 的字体，个别按钮会有点小问题，所以使用 Firefox 和 Safari 浏览器查看更佳）

1.Html构建

代码如下（示例）：

<div id="button-1"> Switch动画开关按钮组件

      <div class="button r" id="button-1">
             <input type="checkbox" class="checkbox" />
             <div class="knobs"></div>
             <div class="layer"></div>
     </div>

2.CSS编写

代码如下（示例）：

这里通过type=checkbox的input是否checked编写打开与关闭样式动画效果

after和before伪元素来设置开、关文字



/* Button 1 */
#button-1 .knobs:before {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before {
    content: 'NO';
    left: 42px;
    background-color: #f44336;
}

#button-1 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
    transition: 0.3s ease all;
}

3.完整代码

index.html文件

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>纯CSS制作Switch动画开关按钮演示_dowebok</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>纯CSS制作Switch动画开关按钮演示</h1>
        <div id="app-cover">
            <div class="row">
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-1">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-2">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-3">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-4">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-5">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"><span></span></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-6">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"> </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-7">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-8">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button r" id="button-9">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-10">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span>YES</span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-11">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-12">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-13">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-14">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-15">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-16">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs"></div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-17">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
                <div class="toggle-button-cover">
                    <div class="button-cover">
                        <div class="button b2" id="button-18">
                            <input type="checkbox" class="checkbox" />
                            <div class="knobs">
                                <span></span>
                            </div>
                            <div class="layer"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

 
     
    </body>
</html>

style.css文件

* {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

*:focus {
    outline: none;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: #f1f9f9;
}

#app-cover {
    display: table;
    width: 600px;
    margin: 40px auto;
    counter-reset: button-counter;
}

.row {
    display: table-row;
}

.toggle-button-cover {
    display: table-cell;
    position: relative;
    width: 200px;
    height: 140px;
    box-sizing: border-box;
}

.button-cover {
    height: 100px;
    margin: 20px;
    background-color: #fff;
    box-shadow: 0 10px 20px -8px #c5d6d6;
    border-radius: 4px;
}

.button-cover:before {
    counter-increment: button-counter;
    content: counter(button-counter);
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d7e3e3;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.button-cover,
.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button {
    position: relative;
    top: 50%;
    width: 74px;
    height: 36px;
    margin: -20px auto 0 auto;
    overflow: hidden;
}

.button.r,
.button.r .layer {
    border-radius: 100px;
}

.button.b2 {
    border-radius: 2px;
}

.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs {
    z-index: 2;
}

.layer {
    width: 100%;
    background-color: #ebf7fc;
    transition: 0.3s ease all;
    z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before {
    content: 'NO';
    left: 42px;
    background-color: #f44336;
}

#button-1 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
    transition: 0.3s ease all;
}

/* Button 2 */
#button-2 .knobs:before,
#button-2 .knobs:after {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 50%;
    transition: 0.3s ease all;
}

#button-2 .knobs:before {
    content: 'YES';
}

#button-2 .knobs:after {
    content: 'NO';
}

#button-2 .knobs:after {
    right: -28px;
    left: auto;
    background-color: #f44336;
}

#button-2 .checkbox:checked + .knobs:before {
    left: -28px;
}

#button-2 .checkbox:checked + .knobs:after {
    right: 4px;
}

#button-2 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 3 */
#button-3 .knobs:before {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 50%;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

#button-3 .checkbox:active + .knobs:before {
    width: 46px;
    border-radius: 100px;
}

#button-3 .checkbox:checked:active + .knobs:before {
    margin-left: -26px;
}

#button-3 .checkbox:checked + .knobs:before {
    content: 'NO';
    left: 42px;
    background-color: #f44336;
}

#button-3 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 4 */
#button-4 .knobs:before,
#button-4 .knobs:after {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-4 .knobs:before {
    content: 'YES';
}

#button-4 .knobs:after {
    content: 'NO';
}

#button-4 .knobs:after {
    top: -28px;
    right: 4px;
    left: auto;
    background-color: #f44336;
}

#button-4 .checkbox:checked + .knobs:before {
    top: -28px;
}

#button-4 .checkbox:checked + .knobs:after {
    top: 4px;
}

#button-4 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 5 */
#button-5 {
    perspective: 60px;
    overflow: visible;
}

#button-5 .knobs:before,
#button-5 .knobs span {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-5 .knobs:before {
    background-color: #03a9f4;
}

#button-5 .knobs span:before {
    content: 'YES';
}

#button-5 .knobs:before,
#button-5 .layer {
    transform: rotateY(0);
    transform-origin: center;
}

#button-5 .checkbox:checked + .knobs:before,
#button-5 .checkbox:checked + .knobs span {
    left: 42px;
}

#button-5 .checkbox:checked + .knobs:before {
    transform: rotateY(180deg);
    background-color: #f44336;
}

#button-5 .checkbox:checked + .knobs span:before {
    content: 'NO';
    left: 42px;
}

#button-5 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
    transform: rotateY(-180deg);
}

#button-5 .knobs,
#button-5 .knobs:before,
#button-5 .layer {
    transition: 0.3s ease all;
}

/* Button 6 */
#button-6 {
    overflow: visible;
}

#button-6 .knobs:before {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 50%;
}

#button-6 .layer,
#button-6 .knobs,
#button-6 .knobs:before {
    transform: rotateZ(0);
    transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-6 .checkbox:checked + .knobs {
    transform: rotateZ(-180deg);
}

#button-6 .checkbox:checked + .knobs:before {
    content: 'NO';
    background-color: #f44336;
    transform: rotateZ(180deg);
}

#button-6 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
    transform: rotateZ(180deg);
}

/* Button 7 */
#button-7 .knobs:before,
#button-7 .knobs:after {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 50%;
}

#button-7 .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 0;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 50%;
}

#button-7 .knobs:before {
    content: 'YES';
    left: 4px;
    color: #fff;
    opacity: 1;
}

#button-7 .knobs:after {
    content: 'NO';
    left: 42px;
    color: #fff;
    width: 14px;
    text-align: left;
    padding: 9px 7px;
    background-color: #f44336;
    /* background-color: #000; */
    opacity: 0;
}

#button-7 .knobs:before,
#button-7 .knobs:after {
    transition: 0.3s ease all;
    z-index: 2;
}

#button-7 .knobs span {
    left: 4px;
    background-color: #03a9f4;
    transition: 0.2s ease all;
    /* transition: 5s ease all; */
    z-index: 1;
}

#button-7 .checkbox:checked + .knobs:before {
    opacity: 0;
}

#button-7 .checkbox:checked + .knobs:after {
    opacity: 1;
}

#button-7 .checkbox:checked + .knobs span {
    top: 18px;
    left: 56px;
    left: 58px;
    width: 0;
    height: 0;
    padding: 0;
    background-color: #fff;
    z-index: 3;
}

#button-7 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 8 */
#button-8 .knobs {
    border-radius: 100px;
    overflow: hidden;
}

#button-8 .knobs:before,
#button-8 .knobs:after,
#button-8 .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 50%;
    transition: 0.3s ease all;
}

#button-8 .knobs:before {
    content: 'YES';
    color: #fff;
    left: 4px;
}

#button-8 .knobs:after {
    content: 'NO';
    left: 42px;
    color: #fff;
    background-color: #f44336;
    opacity: 0;
}

#button-8 .knobs:before,
#button-8 .knobs:after {
    z-index: 2;
}

#button-8 .knobs span {
    left: 4px;
    background-color: #03a9f4;
    z-index: 1;
}

#button-8 .checkbox:checked + .knobs:before {
    opacity: 0;
}

#button-8 .checkbox:checked + .knobs:after {
    opacity: 1;
}

#button-8 .checkbox:checked + .knobs span {
    background-color: #fcebeb;
    transform: scale(4);
}

/* Button 9 */
#button-9 .knobs:before,
#button-9 .knobs:after,
#button-9 .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 50%;
    transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-9 .knobs:before {
    content: 'YES';
    left: 4px;
}

#button-9 .knobs:after {
    content: 'NO';
    right: -24px;
}

#button-9 .knobs:before,
#button-9 .knobs:after {
    color: #fff;
    z-index: 2;
}

#button-9 .knobs span {
    left: 4px;
    background-color: #03a9f4;
    z-index: 1;
}

#button-9 .checkbox:checked + .knobs:before {
    left: -24px;
}

#button-9 .checkbox:checked + .knobs:after {
    right: 4px;
}

#button-9 .checkbox:checked + .knobs span {
    left: 42px;
    background-color: #f44336;
}

#button-9 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 10 */
#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 2px;
    transition: 0.3s ease all;
}

#button-10 .knobs:before {
    content: '';
    left: 4px;
    background-color: #03a9f4;
}

#button-10 .knobs:after {
    content: 'NO';
    right: 4px;
    color: #4e4e4e;
}

#button-10 .knobs span {
    display: inline-block;
    left: 4px;
    color: #fff;
    z-index: 1;
}

#button-10 .checkbox:checked + .knobs span {
    color: #4e4e4e;
}

#button-10 .checkbox:checked + .knobs:before {
    left: 42px;
    background-color: #f44336;
}

#button-10 .checkbox:checked + .knobs:after {
    color: #fff;
}

#button-10 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 11 */
#button-11 {
    overflow: visible;
}

#button-11 .knobs {
    perspective: 70px;
}

#button-11 .knobs:before,
#button-11 .knobs:after,
#button-11 .knobs span {
    position: absolute;
    top: 4px;
    border-radius: 2px;
}

#button-11 .knobs:before,
#button-11 .knobs:after {
    width: 20px;
    height: 10px;
    color: #4e4e4e;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
}

#button-11 .knobs:before {
    content: 'YES';
    left: 4px;
}

#button-11 .knobs:after {
    content: 'NO';
    right: 4px;
}

#button-11 .knobs span {
    right: 4px;
    width: 33px;
    height: 28px;
    background-color: #03a9f4;
    transform: rotateY(0);
    transform-origin: 0% 50%;
    transition: 0.6s ease all;
    z-index: 1;
}

#button-11 .checkbox:checked + .knobs span {
    transform: rotateY(-180deg);
    background-color: #f44336;
}

#button-11 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 12 */
#button-12 .knobs:before,
#button-12 .knobs:after,
#button-12 .knobs span,
#button-12 .knobs span:before,
#button-12 .knobs span:after {
    position: absolute;
    top: 4px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    border-radius: 2px;
    transition: 0.3s ease all;
}

#button-12 .knobs:before {
    content: 'YES';
    left: 4px;
}

#button-12 .knobs:after {
    content: 'NO';
    right: 4px;
}

#button-12 .knobs:before,
#button-12 .knobs:after {
    width: 27px;
    height: 10px;
    color: #4e4e4e;
    padding: 9px 3px;
    z-index: 1;
}

#button-12 .knobs span {
    display: inline-block;
    z-index: 2;
}

#button-12 .knobs span,
#button-12 .knobs span:before,
#button-12 .knobs span:after {
    width: 20px;
    height: 10px;
    padding: 9px 4px;
}

#button-12 .knobs span:before,
#button-12 .knobs span:after {
    content: '';
    top: 0;
}

#button-12 .knobs span:before {
    left: -28px;
    background-color: #f44336;
}

#button-12 .knobs span:after {
    right: -42px;
    background-color: #03a9f4;
}

#button-12 .checkbox:checked + .knobs span:before {
    left: 4px;
}

#button-12 .checkbox:checked + .knobs span:after {
    right: -74px;
}

#button-12 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 13 */
#button-13 .knobs:before,
#button-13 .knobs:after,
#button-13 .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 2px;
    transition: 0.3s ease all;
}

#button-13 .knobs:before,
#button-13 .knobs:after {
    color: #4e4e4e;
    z-index: 1;
}

#button-13 .knobs:before {
    content: 'YES';
    left: 4px;
}

#button-13 .knobs:after {
    content: 'NO';
    right: 4px;
}

#button-13 .knobs span {
    width: 25px;
    left: 37px;
    background-color: #03a9f4;
    z-index: 2;
}

#button-13 .checkbox:checked + .knobs span {
    left: 4px;
    background-color: #f44336;
}

#button-13 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 14 */
#button-14 .knobs:before,
#button-14 .knobs:after,
#button-14 .knobs span:before,
#button-14 .knobs span:after {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    border-radius: 2px;
    transition: 0.3s ease all;
}

#button-14 .knobs:before,
#button-14 .knobs:after {
    color: #4e4e4e;
    z-index: 1;
}

#button-14 .knobs:before {
    content: 'YES';
    left: 4px;
}

#button-14 .knobs:after {
    content: 'NO';
    right: 4px;
}

#button-14 .knobs span {
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

#button-14 .knobs span:before {
    left: 4px;
    top: -28px;
    background-color: #f44336;
}

#button-14 .knobs span:after {
    top: 4px;
    left: 39px;
    background-color: #03a9f4;
}

#button-14 .knobs span:before,
#button-14 .knobs span:after {
    content: '';
    width: 23px;
    z-index: 2;
}

#button-14 .checkbox:checked + .knobs span:before {
    top: 4px;
}

#button-14 .checkbox:checked + .knobs span:after {
    top: -28px;
}

#button-14 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 15 */
#button-15 .knobs:before,
#button-15 .knobs:after {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    opacity: 1;
    border-radius: 2px;
    transform: scale(1);
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-15 .knobs:before {
    content: 'YES';
    left: 4px;
    background-color: #03a9f4;
}

#button-15 .knobs:after {
    content: 'NO';
    right: 4px;
    opacity: 0;
    transform: scale(4);
    background-color: #f44336;
}

#button-15 .checkbox:checked + .knobs:before {
    opacity: 0;
    transform: scale(4);
}

#button-15 .checkbox:checked + .knobs:after {
    opacity: 1;
    transform: scale(1);
}

#button-15 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 16 */
#button-16 .knobs:before {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
    background-color: #03a9f4;
    border-radius: 2px;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

#button-16 .checkbox:active + .knobs:before {
    width: 46px;
}

#button-16 .checkbox:checked:active + .knobs:before {
    margin-left: -26px;
}

#button-16 .checkbox:checked + .knobs:before {
    content: 'NO';
    left: 42px;
    background-color: #f44336;
}

#button-16 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 17 */
#button-17 .knobs:before,
#button-17 .knobs span {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    padding: 9px 4px;
}

#button-17 .knobs:before {
    transition: 0.3s ease all, left 0.5s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    z-index: 2;
}

#button-17 .knobs span {
    background-color: #03a9f4;
    border-radius: 2px;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    z-index: 1;
}

#button-17 .checkbox:checked + .knobs:before {
    content: 'NO';
    left: 42px;
}

#button-17 .checkbox:checked + .knobs span {
    left: 42px;
    background-color: #f44336;
}

#button-17 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

/* Button 18 */
#button-18 .knobs:before,
#button-18 .knobs span {
    content: 'YES';
    position: absolute;
    top: 4px;
    left: 4px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    background-color: #03a9f4;
    border-radius: 2px;
}

#button-18 .knobs:before {
    top: 50%;
    left: 8px;
    width: 20px;
    height: 10px;
    margin-top: -5px;
    background-color: transparent;
    z-index: 2;
}

#button-18 .knobs span {
    width: 20px;
    height: 10px;
    padding: 9px 4px;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    z-index: 1;
}

#button-18 .checkbox:active + .knobs:before {
    left: 10px;
    width: 46px;
    height: 4px;
    color: transparent;
    margin-top: -2px;
    background-color: #0095d8;
    transition: 0.3s ease all;
    overflow: hidden;
}

#button-18 .checkbox:active + .knobs span {
    width: 58px;
}

#button-18 .checkbox:checked:active + .knobs:before {
    left: auto;
    right: 10px;
    background-color: #d80000;
}

#button-18 .checkbox:checked:active + .knobs span {
    margin-left: -38px;
}

#button-18 .checkbox:checked + .knobs:before {
    content: 'NO';
    left: 47px;
}

#button-18 .checkbox:checked + .knobs span {
    left: 42px;
    background-color: #f44336;
}

#button-18 .checkbox:checked ~ .layer {
    background-color: #fcebeb;
}

#ytd-url {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px 14px;
    margin: 20px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    background-color: #143240;
    border-radius: 4px;
    box-shadow: 0 10px 20px -5px rgba(20, 50, 64, 0.76);
}

总结

        以上就是今天要讲的内容啦，给大家分享了一个纯CSS制作Switch动画开关按钮演示，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/349448.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【参加CUDA线上训练营】共享内存实例1：矩阵转置实现及其优化①

【参加CUDA线上训练营】共享内存实例1：矩阵转置实现及其优化①

【参加CUDA线上训练营】共享内存实例1&#xff1a;矩阵转置实现及其优化①1.完整代码2.原理介绍2.1 将各block 线程对应元素放入共享内存tile2.2 实现转置2.3 在此基础上修改参考文献本文参考Nvidia官方blog[An Efficient Matrix Transpose in CUDA C/C及其对应的github代码tra…
阅读更多...
表情包可视化编辑、生成配置信息数据工具

表情包可视化编辑、生成配置信息数据工具

合成GIF图片 - 表情包 后续&#xff0c;用于快速、便捷生成 img_config.js 中 要生成的GIF每一帧数据&#xff08;写入头像图片信息参数&#xff09;&#xff1b; 1、先上传 写入GIF中头像 标准图&#xff0c;同时获取图片信息&#xff0c;更新 写入GIF中头像 初始值&#xff0…
阅读更多...
5-HT2A靶向药物|适应症|市场销售-上市药品前景分析

5-HT2A靶向药物|适应症|市场销售-上市药品前景分析

据世界卫生组织称&#xff0c;抑郁症是一种多因素疾病&#xff0c;影响全球约3.5 亿人。中枢神经系统最广泛的单胺 - 血清素 (5-HT) 被认为在这种情况的病理机制中起着至关重要的作用&#xff0c;并且神经递质的重要性被“血清素假说”提升&#xff0c;将抑郁症的存在联系起来 …
阅读更多...
配置Qt Creator

配置Qt Creator

前言 为了使Qt Creator更像您最喜欢的代码编辑器或IDE&#xff0c;您可以更改键盘快捷键、配色方案、通用高亮显示、代码片段和版本控制系统的设置。 检查生成和运行设置 Qt Creator是一个集成开发环境(IDE)&#xff0c;可以用来开发Qt应用程序。虽然您可以使用Qt Installer…
阅读更多...
聊天不发表情包会不习惯吗，Python带你轻松采集上万个表情包

聊天不发表情包会不习惯吗，Python带你轻松采集上万个表情包

前言 (&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e;嗨 大家好&#xff0c;这里是小圆 聊天没表情包你会有点不习惯的感jio吗 就比如新注册了个qq或者微信再或者企业微信 emmm我就是这样拿到新账号后&#xff0c;跟别人聊聊天想发送表情包 &#xff0c;…
阅读更多...
C++-类和对象（下）

C++-类和对象（下）

C-类和对象&#xff08;下&#xff09;一&#xff0c;const成员函数二&#xff0c;再谈构造函数1&#xff0c;初始化列表2&#xff0c;explicit关键字三&#xff0c;static成员四&#xff0c;友元&#xff08;friend&#xff09;1&#xff0c;全局函数做友元2&#xff0c;类做友…
阅读更多...
冷冻电镜 - ChimeraX Density Map 密度图 操作

冷冻电镜 - ChimeraX Density Map 密度图 操作

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://blog.csdn.net/caroline_wendy/article/details/129055160 由冷冻电镜所生成的Volume，需要观察其内部结构，使用ChimeraX进行操作。 加载Volumes，例如my_volume.mrc 效果如下： 高斯滤波 在命令行(Co…
阅读更多...
python 数据分析可视化实战 超全 附完整代码数据

python 数据分析可视化实战 超全 附完整代码数据

代码数据&#xff1a;https://download.csdn.net/download/qq_38735017/873799141.1 数据预处理1.1.1 异常值检测①将支付时间转为标准时间的过程中发生错误&#xff0c;经排查错误数据为‘2017/2/29’,后将其修改为‘2017/2/27’。②经检测发现部分订单应付金额与实付金额都为…
阅读更多...
解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全

解决jupyter以及windows系统中pycharm编译器画图的中文乱码问题大全

一、jupyter环境下中文乱码问题解决 我们在jupyter的notebook中使用matplotlib画图的时候&#xff0c;经常性的会遇见一些中文乱码显示□的情况,如下所示: 在此&#xff0c;网上给出的方法大多是以下的解决方法&#xff1a; import matplotlib.pyplot as pltplt.rcParams[fo…
阅读更多...
界面组件Telerik UI for WinForms R1 2023——全新的Windows 11主题

界面组件Telerik UI for WinForms R1 2023——全新的Windows 11主题

Telerik UI for WinForms拥有适用Windows Forms的110多个令人惊叹的UI控件。所有的UI for WinForms控件都具有完整的主题支持&#xff0c;可以轻松地帮助开发人员在桌面和平板电脑应用程序提供一致美观的下一代用户体验。Telerik UI for WinForms组件发布了2023年第一个重大版本…
阅读更多...
QCon演讲实录（下）：多云管理关键能力实现与解析-AppManager

QCon演讲实录（下）：多云管理关键能力实现与解析-AppManager

在上篇中&#xff0c;我们已经基本了解了多云管理。现在&#xff0c;我们将深入探讨多云管理关键能力实现&#xff1a;AppManager。 什么是AppManager&#xff1f; 上面我们讲了理论、我们自己使用的交付流程和整体架构&#xff0c;下面我们进入关键能力实现与解析的环节&…
阅读更多...
Allegro如何通过视图显示区分动态和静态铜皮操作指导

Allegro如何通过视图显示区分动态和静态铜皮操作指导

Allegro如何通过视图显示区分动态和静态铜皮操作指导 用Allegro做PCB设计的时候，通常动态和静态铜皮是无法通过视图显示区分的，只能通过show element查看得知，如下图 左边铜皮是动态铜皮，右边是静态铜皮 但Allegro可以通过一些设置让动静态铜皮以不同效果显示出来 具体操…
阅读更多...
Elasticsearch：使用 intervals query - 根据匹配项的顺序和接近度返回文档

Elasticsearch：使用 intervals query - 根据匹配项的顺序和接近度返回文档

Intervals query 根据匹配项的顺序和接近度返回文档。Intervals 查询使用匹配规则&#xff0c;由一小组定义构成。 然后将这些规则应用于指定字段中的术语。 这些定义产生跨越文本正文中的术语的最小间隔序列。 这些间隔可以通过父源进一步组合和过滤。 上述描述有点费解。我…
阅读更多...
【计算机网络】HTTPS协议原理

【计算机网络】HTTPS协议原理

文章目录一、认识HTTPS协议二、为什么要发明HTTPS三、HTTP与HTTPS的区别四、常见的加密方式1. 对称加密2. 非对称加密3. 数据摘要4. 数字签名五、HTTPS的原理探究方案1&#xff1a;只使用对称加密方案2&#xff1a;只使用非对称加密方案3&#xff1a;双方都使用非对称加密方案4…
阅读更多...
2.15学习总结

2.15学习总结

上次被学长的问题给问住了&#xff0c;突然发现自己动规有点糊涂&#xff0c;然后就去屁颠屁颠的复习&#xff0c;找几个之前做过的题&#xff0c;突然发现&#xff0c;竟然还是写了好久才写出来&#xff0c;怎么说呢&#xff0c;信心被强烈打击到&#xff0c;然后自己找了一个…
阅读更多...
MyBatis 之二（增、删、改操作）

MyBatis 之二（增、删、改操作）

文章目录1. 修改操作1.1 在 mapper&#xff08;interface&#xff09;里面添加修改方法的声明1.2 在 XMl 中添加 <update> 标签和修改的 sql 代码1.3 在 UserMapper 中右键 Generate 点击 Test 生成 update 测试类2. 删除操作2.1 在 mapper &#xff08;interface&#x…
阅读更多...
重生之我是赏金猎人-SRC漏洞挖掘(六)-记一次有趣的客户端RCE+服务端XXE挖掘

重生之我是赏金猎人-SRC漏洞挖掘(六)-记一次有趣的客户端RCE+服务端XXE挖掘

0x01 起因 朋友给某甲方做渗透测试&#xff0c;奈何甲方是某知名保险&#xff0c;系统太耐艹&#xff0c;半天不出货 兄弟喊我来一块来看&#xff0c;于是有了本文 0x02 客户端RCE一处 朋友把靶标发给我看了下&#xff0c;除了两个下载链接啥也没有 链接下载下来的东西如图…
阅读更多...
回溯算法理论基础

回溯算法理论基础

目录什么是回溯法回溯法的效率回溯法解决的问题如何理解回溯法回溯法模板什么是回溯法 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。 回溯是递归的副产品&#xff0c;只要有递归就会有回溯。 所以以下讲解中&#xff0c;回溯函数也就是递归函数&#xff0c;指…
阅读更多...
SpringCloud: sentinel降级配置、热点参数、系统规则 配置到nacos

SpringCloud: sentinel降级配置、热点参数、系统规则 配置到nacos

一、application.yml spring.cloud.sentinel cloud:nacos:discovery:# 服务注册地址server-addr: xxx.xxx.xxx.xxx:8848sentinel:eager: truetransport:# 控制台地址dashboard: localhost:9999# nacos配置持久化datasource:ds2:nacos:server-addr: xxx.xxx.xxx.xxx:8848dataId…
阅读更多...
YOLO 格式数据集制作

YOLO 格式数据集制作

目录 1. YOLO简介 2.分割数据集准备 3.代码展示 整理不易&#xff0c;欢迎一键三连&#xff01;&#xff01;&#xff01; 1. YOLO简介 YOLO&#xff08;You Only Look Once&#xff09;是一种流行的目标检测和图像分割模型&#xff0c;由华盛顿大学的 Joseph Redmon 和 Al…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023