分享几个水滴效果的按钮

news2024/11/18 0:38:19

先看效果：
在这里插入图片描述
再看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水滴效果的按钮</title>
    <link rel="stylesheet" href="https://codepen.io/nicolasjesenberger/pen/GRYvOWy/d5176f9552830811da3e2bde0120cc26.css">
    <script src="https://codepen.io/nicolasjesenberger/pen/VwEzMrY/81eb6139c2c9b7dbc46e43d898e7d29b.js"></script>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1em;
            min-height: 100vh;
            font-size: 2em;
        }

        .toggle-container {
            position: relative;
            border-radius: 3.125em;
            width: 3.25em;
            height: 1.875em;
        }

        .toggle-checkbox {
            -webkit-appearance: none;
            appearance: none;
            position: absolute;
            z-index: 1;
            border-radius: inherit;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .toggle-track {
            display: flex;
            align-items: center;
            position: relative;
            border-radius: inherit;
            padding: 0.25em;
            width: 100%;
            height: 100%;
            background-color: #aeaeae;
            box-shadow: inset 0 0.0625em 0.125em rgba(0, 0, 0, 0.2);
            transition: background-color 0.4s linear;
        }
        .toggle-container.green > .toggle-checkbox:checked + .toggle-track {
            background-color: #4ccf59;
        }
        .toggle-container.blue > .toggle-checkbox:checked + .toggle-track {
            background-color: #3384fb;
        }
        .toggle-container.boo > .toggle-checkbox:checked + .toggle-track {
            background-color: #ff3372;
        }

        .toggle-thumb {
            position: relative;
            border-radius: 0.6875em;
            transform-origin: left;
            width: 1.375em;
            height: 1.375em;
            background-color: #fff;
            box-shadow: 0 0.25em 0.25em rgba(0, 0, 0, 0.2), inset 0 -0.125em 0.25em rgba(0, 0, 0, 0.2);
        }
        .toggle-checkbox.toggled-once + .toggle-track > .toggle-thumb {
            animation-name: grow-out, bounce-out;
            animation-duration: 0.2s;
            animation-timing-function: cubic-bezier(0.75, 0, 1, 1), cubic-bezier(0, 0, 0.3, 1.5);
            animation-delay: 0s, 0.2s;
            animation-fill-mode: forwards;
        }
        .toggle-checkbox.toggled-once:checked + .toggle-track > .toggle-thumb {
            animation-name: grow-in, bounce-in;
        }
        .toggle-container.boo .toggle-thumb::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-radius: inherit;
            width: 100%;
            height: 100%;
            background-image: url("https://assets.codepen.io/4175254/boo-face.png");
            background-size: 63.6363636364% 54.5454545455%;
            background-position: center;
            background-repeat: no-repeat;
            box-shadow: inset 0 -0.125em 0.25em rgba(0, 0, 0, 0.2);
            image-rendering: pixelated;
            opacity: 0;
            transition: opacity 0.2s linear;
        }
        .toggle-container.boo > .toggle-checkbox:checked + .toggle-track > .toggle-thumb::after {
            opacity: 1;
        }

        @media (hover: hover) {
            .toggle-container.boo > .toggle-checkbox:hover + .toggle-track > .toggle-thumb::after {
                opacity: 1;
            }
        }

        @keyframes grow-in {
            0% {
                border-radius: 0.6875em;
                transform: translateX(0) scale(1);
            }
            100% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.5em) scale(1.5454545455, 0.7272727273);
            }
        }
        @keyframes bounce-in {
            0% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.5em) scale(1.5454545455, 0.7272727273);
            }
            100% {
                border-radius: 0.6875em;
                transform: translateX(100%) scale(1);
            }
        }
        @keyframes grow-out {
            0% {
                border-radius: 0.6875em;
                transform: translateX(100%) scale(1);
            }
            100% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.125em) scale(1.5454545455, 0.7272727273);
            }
        }
        @keyframes bounce-out {
            0% {
                border-radius: 0.4448529412em / 0.9453125em;
                transform: translateX(0.125em) scale(1.5454545455, 0.7272727273);
            }
            100% {
                border-radius: 0.6875em;
                transform: translateX(0) scale(1);
            }
        }
    </style>
</head>
<body>
<div class="toggle-container green">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-track">
        <div class="toggle-thumb"></div>
    </div>
</div>

<div class="toggle-container blue">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-track">
        <div class="toggle-thumb"></div>
    </div>
</div>

<div class="toggle-container boo">
    <input class="toggle-checkbox" type="checkbox">
    <div class="toggle-track">
        <div class="toggle-thumb"></div>
    </div>
</div>
</body>
<script>
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    const detectToggleOnce = (e) => {
        e.target.classList.add('toggled-once');
    };

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', detectToggleOnce, { once: true });
    });
</script>
</html>