音量切換CSS開關（volume toggle CSS switch）

更多有趣示例 盡在 小紅磚社區

示例

代碼

HTML

<label class="volume">
    <input type="checkbox">
    <svg viewBox="0 0 108 96">
        <path d="M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"></path>
        <path d="M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"></path>
        <path d="M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"></path>
    </svg>
</label>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/7616797-Volume-Toggle" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>

CSS

.volume {
    --line: #fff;
    --line-width: 6px;
    --duration: .5s;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    input {
        display: none;
        & + svg {
            display: block;
            fill: none;
            stroke: var(--line);
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: var(--line-width);
            width: 108px;
            height: 96px;
            path {
                animation: var(--name) var(--duration) ease forwards;
                &:nth-child(2) {
                    stroke-dashoffset: 1px;
                }
                &:nth-child(3) {
                    stroke-dashoffset: 1px;
                }
            }
        }
        &:checked {
            & + svg {
                path {
                    &:nth-child(1) {
                        --name: shape;
                    }
                    &:nth-child(2) {
                        --name: small;
                    }
                    &:nth-child(3) {
                        --name: large;
                    }
                }
            }
        }
        &:not(:checked) {
            & + svg {
                path {
                    &:nth-child(1) {
                        --name: shape-r;
                    }
                    &:nth-child(2) {
                        --name: small-r;
                    }
                    &:nth-child(3) {
                        --name: large-r;
                    }
                }
            }
        }
    }
}

@keyframes small {
    0%,
    30% {
        stroke-dasharray: 0 0 30px 64px;
    }
    40% {
        stroke-dashoffset: 16px;
    }
    80%,
    100% {
        stroke-dashoffset: 1px;
    }
    70% {
        stroke-dasharray: 0 43px 30px 64px;
    }
    100% {
        stroke-dasharray: 0 39px 30px 64px;
    }
}

@keyframes small-r {
    0% {
        stroke-dasharray: 0 39px 30px 64px;
    }
    0%,
    40% {
        stroke-dashoffset: 1px;
    }
    70% {
        stroke-dashoffset: 16px;
    }
    70%,
    100% {
        stroke-dasharray: 0 0 30px 64px;
    }
}

@keyframes large {
    0%,
    30% {
        stroke-dasharray: 0 0 50px 84px;
    }
    40% {
        stroke-dashoffset: 16px;
    }
    80%,
    100% {
        stroke-dashoffset: 1px;
    }
    70% {
        stroke-dasharray: 0 82px 32px 84px;
    }
    100% {
        stroke-dasharray: 0 78px 32px 84px;
    }
}

@keyframes large-r {
    0% {
        stroke-dasharray: 0 78px 32px 84px;
    }
    0%,
    40% {
        stroke-dashoffset: 1px;
    }
    70% {
        stroke-dashoffset: 16px;
    }
    70%,
    100% {
        stroke-dasharray: 0 0 50px 84px;
    }
}

@keyframes shape {
    0% {
        stroke-dasharray: 60px 0 184px;
        stroke-dashoffset: 0;
    }
    70% {
        stroke-dasharray: 63px 51px 184px;
        stroke-dashoffset: 21px;
    }
    100% {
        stroke-dasharray: 59px 47px 184px;
        stroke-dashoffset: 17px;
    }
}

@keyframes shape-r {
    0% {
        stroke-dasharray: 59px 47px 184px;
        stroke-dashoffset: 17px;
    }
    100% {
        stroke-dasharray: 60px 0 184px;
        stroke-dashoffset: 0;
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #275EFE;
    .dribbble {
        position: fixed;
        display: block;
        right: 24px;
        bottom: 24px;
        img {
            display: block;
            width: 76px;
        }
    }
}