css3实现切换按钮效果

最新推荐文章于 2024-07-24 09:00:00 发布

转载最新推荐文章于 2024-07-24 09:00:00 发布 · 816 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/justinwxt/p/7083919.html

一、需求分析

在移动端，经常会需要一个切换按钮，如图：

切换前

切换后

那我可以用css属性来实现这个按钮的切换功能

二、代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #toggle{
                display: none;
            }
            #toggle+label{
                display: block;
                position: relative;
                width: 120px;
                height: 60px;
                padding: 2px;
                cursor: pointer;
                /* background-color: #ddd; */
                border-radius: 60px;

            }
            #toggle+label::before,#toggle+label::after{
                display: block;
                position: absolute;
                left: 1px;
                top: 1px;
                bottom: 1px;
            }
            #toggle+label::before{
                right: 1px;
                /* width: 122px;
                height: 60px; */
                border-radius: 60px;
                background-color: #f5f5f5;
                content: "";
                transition: background-color 0.4s;
            }
            #toggle+label::after{
                width: 58px;
                
                border-radius: 100%;
                background-color: #fff;
                content: "";
                transition: margin 0.4s;
                box-shadow: 1px 0px 5px 1px #ddd inset;
            }
            #toggle:checked + label::before{
                background-color: green;
            }
            #toggle:checked + label::after{
                margin-left: 62px;
            }
            .test{
                width: 100px;
                height: 100px;
                position: relative;
            }
            .box{
                position: absolute;
                display: block;
                
                left: 1px;
                top: 1px;
                bottom: 1px;
                right: 1px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
    <div>
        <input type="checkbox" id="toggle">
        <label for="toggle"></label>
    </div>
    <div class="test">
        <div class="box"></div>
    </div>
    </body>
</html>