纯 CSS 开关切换按钮

最新推荐文章于 2024-09-02 11:12:33 发布

南北极之间

最新推荐文章于 2024-09-02 11:12:33 发布

阅读量1.6k

点赞数

分类专栏： web前端特效源码文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_22182989/article/details/132535075

版权

web前端特效源码专栏收录该内容

600 篇文章 93 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了如何仅使用CSS来创建具有视觉吸引力的开关切换按钮，通过伪类选择器和过渡效果实现平滑的动画过渡，适用于前端界面中的开/关状态切换。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯 CSS 开关切换按钮</title>
    <style>
        html {
            font-size: 62.5%;
        }

        body {
            background-color: #1848a0;
        }

        .wrapper {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .toggler {
            animation: showToggler 300ms ease-out;
            cursor: pointer;
            height: 25px;
            margin: 10px 0;
        }

        .toggler .cho