{"html":"\n \n \n ","css":"/* level settings 👇 */\n\n.slider {\n /* slider */\n --slider-width: 100%;\n --slider-height: 6px;\n --slider-bg: rgb(82, 82, 82);\n --slider-border-radius: 999px;\n /* level */\n --level-color: #fff;\n --level-transition-duration: .1s;\n /* icon */\n --icon-margin: 15px;\n --icon-color: var(--slider-bg);\n --icon-size: 25px;\n}\n\n.slider {\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: reverse;\n -ms-flex-direction: row-reverse;\n flex-direction: row-reverse;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.slider .volume {\n display: inline-block;\n vertical-align: top;\n margin-right: var(--icon-margin);\n color: var(--icon-color);\n width: var(--icon-size);\n height: auto;\n}\n\n.slider .level {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: var(--slider-width);\n height: var(--slider-height);\n background: var(--slider-bg);\n overflow: hidden;\n border-radius: var(--slider-border-radius);\n -webkit-transition: height var(--level-transition-duration);\n -o-transition: height var(--level-transition-duration);\n transition: height var(--level-transition-duration);\n cursor: inherit;\n}\n\n.slider .level::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 0;\n height: 0;\n -webkit-box-shadow: -200px 0 0 200px var(--level-color);\n box-shadow: -200px 0 0 200px var(--level-color);\n}\n\n.slider:hover .level {\n height: calc(var(--slider-height) * 2);\n}"}

happy-dodo-17

👁 实时预览

📝 源代码