纯 CSS 开关切换按钮

最新推荐文章于 2024-04-21 10:00:27 发布

南北极之间

最新推荐文章于 2024-04-21 10:00:27 发布

阅读量1.3k

点赞数

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

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

版权

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

69 篇文章 81 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

<!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 .choices {
            transition: background-color 300ms ease-out;
            cursor: pointer;
            position: relative;
            display: block;
            width: 100%;
            height: 25px;

了解本专栏