<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
* { border : 0; box-sizing : border-box; margin : 0; padding : 0} :root { --hue : 223; --off-hue : 3; --on-hue1 : 123; --on-hue2 : 168; --fg : hsl ( var ( --hue) , 10%, 90%) ; --primary : hsl ( var ( --hue) , 90%, 50%) ; --trans-dur : 0.6s; --trans-timing : cubic-bezier ( 0.65, 0, 0.35, 1) ; font-size : calc ( 40px + ( 60 - 40) * ( 100vw - 320px) / ( 2560 - 320) ) } body,input { font : 1em/1.5 sans-serif} body { background-image : linear-gradient ( 45deg, hsl ( var ( --hue) , 10%, 20%) , hsl ( var ( --hue) , 10%, 10%) ) ; color : var ( --fg) ; display : flex; height : 100vh; transition : background-color var ( --trans-dur) , color var ( --trans-dur) } .switch,.switch__input { -webkit-tap-highlight-color : #0000} .switch { display : block; margin : auto; position : relative; width : 5em; height : 3em} .switch__base-outer,.switch__base-inner { display : block; position : absolute} .switch__base-outer { border-radius : 1.25em; box-shadow : -0.125em -0.125em 0.25em hsl ( var ( --hue) , 10%, 30%) , 0.125em 0.125em 0.125em hsl ( var ( --hue) , 10%, 30%) inset, 0.125em 0.125em 0.25em hsl ( 0, 0%, 0%) , -0.125em -0.125em 0.125em hsl ( var ( --hue) , 10%, 5%) inset; top : 0.125em; left : 0.125em; width : 4.75em; height : 2.75em} .switch__base-inner { border-radius : 1.125em; box-shadow : -0.25em -0.25em 0.25em hsl ( var ( --hue) , 10%, 30%) inset, 0.0625em 0.0625em 0.125em hsla ( var ( --hue) , 10%, 30%) , 0.125em 0.25em 0.25em hsl ( var ( --hue) , 10%, 5%) inset, -0.0625em -0.0625em 0.125em hsla ( var ( --hue) , 10%, 5%) ; top : 0.375em; left : 0.375em; width : 4.25em; height : 2.25em} .switch__base-neon { display : block; overflow : visible; position : absolute; top : 0; left : 0; width : 100%; height : auto; cursor : pointer} .switch__base-neon path { stroke-dasharray : 0 104.26 0; transition : stroke-dasharray var ( --trans-dur) var ( --trans-timing) } .switch__input { outline : transparent; position : relative; width : 100%; height : 100%; -webkit-appearance : none; appearance : none} .switch__input:before { border-radius : 0.125em; box-shadow : 0 0 0 0.125em hsla ( var ( --hue) , 90%, 50%, 0) ; content : "" ; display : block; position : absolute; inset : -0.125em; transition : box-shadow 0.15s linear} .switch__input:focus-visible:before { box-shadow : 0 0 0 0.125em var ( --primary) } .switch__knob,.switch__knob-container { border-radius : 1em; display : block; position : absolute; cursor : pointer} .switch__knob { background-color : hsl ( var ( --hue) , 10%, 15%) ; background-image : radial-gradient ( 88% 88% at 50% 50%, hsl ( var ( --hue) , 10%, 20%) 47%, hsla ( var ( --hue) , 10%, 20%, 0) 50%) , radial-gradient ( 88% 88% at 47% 47%, hsl ( var ( --hue) , 10%, 85%) 45%, hsla ( var ( --hue) , 10%, 85%, 0) 50%) , radial-gradient ( 65% 70% at 40% 60%, hsl ( var ( --hue) , 10%, 20%) 46%, hsla ( var ( --hue) , 10%, 20%, 0) 50%) ; box-shadow : -0.0625em -0.0625em 0.0625em hsl ( var ( --hue) , 10%, 15%) inset, -0.125em -0.125em 0.0625em hsl ( var ( --hue) , 10%, 5%) inset, 0.75em 0.25em 0.125em hsla ( 0, 0%, 0%, 0.8) ; width : 2em; height : 2em; transition : transform var ( --trans-dur) var ( --trans-timing) } .switch__knob-container { overflow : hidden; top : 0.5em; left : 0.5em; width : 4em; height : 2em} .switch__knob-neon { display : block; width : 2em; height : auto} .switch__knob-neon circle { opacity : 0; stroke-dasharray : 0 90.32 0 54.19; transition : opacity var ( --trans-dur) steps ( 1, end) , stroke-dasharray var ( --trans-dur) var ( --trans-timing) } .switch__knob-shadow { border-radius : 50%; box-shadow : 0.125em 0.125em 0.125em hsla ( 0, 0%, 0%, 0.9) ; display : block; position : absolute; top : 0.5em; left : 0.5em; width : 2em; height : 2em; transition : transform var ( --trans-dur) var ( --trans-timing) } .switch__led { background-color : hsl ( var ( --off-hue) , 90%, 70%) ; border-radius : 50%; box-shadow : 0 -0.0625em 0.0625em hsl ( var ( --off-hue) , 90%, 40%) inset, 0 0 0.125em hsla ( var ( --off-hue) , 90%, 70%, 0.3) , 0 0 0.125em hsla ( var ( --off-hue) , 90%, 70%, 0.3) , 0.125em 0.125em 0.125em hsla ( 0, 0%, 0%, 0.5) ; display : block; position : absolute; top : 0; left : 0; width : 0.25em; height : 0.25em; transition : background-color var ( --trans-dur) var ( --trans-timing) , box-shadow var ( --trans-dur) var ( --trans-timing) } .switch__text { overflow : hidden; position : absolute; width : 1px; height : 1px} .switch__input:checked~.switch__led { background-color : hsl ( var ( --on-hue1) , 90%, 70%) ; box-shadow : 0 -0.0625em 0.0625em hsl ( var ( --on-hue1) , 90%, 40%) inset, 0 -0.125em 0.125em hsla ( var ( --on-hue1) , 90%, 70%, 0.3) , 0 0.125em 0.125em hsla ( var ( --on-hue1) , 90%, 70%, 0.3) , 0.125em 0.125em 0.125em hsla ( 0, 0%, 0%, 0.5) } .switch__input:checked~.switch__base-neon path { stroke-dasharray : 52.13 0 52.13} .switch__input:checked~.switch__knob-shadow,.switch__input:checked~.switch__knob-container .switch__knob { transform : translateX ( 100%) } .switch__input:checked~.switch__knob-container .switch__knob-neon circle { opacity : 1; stroke-dasharray : 45.16 0 45.16 54.19; transition-timing-function : steps ( 1, start) , var ( --trans-timing) }
</ style> </ head> < body> < labelclass = " switch" > < inputclass = " switch__input" type = " checkbox" role = " switch" > < spanclass = " switch__base-outer" > </ span> < spanclass = " switch__base-inner" > </ span> < svgclass = " switch__base-neon" viewBox = " 0 0 40 24" width = " 40px" height = " 24px" > < defs> < filterid = " switch-glow" > < feGaussianBlurresult = " coloredBlur" stddeviation = " 1" > </ feGaussianBlur> < feMerge> < feMergeNodein = " coloredBlur" > </ feMergeNode> < feMergeNodein = " SourceGraphic" > </ feMergeNode> </ feMerge> </ filter> < linearGradientid = " switch-gradient1" x1 = " 0" y1 = " 0" x2 = " 1" y2 = " 0" > < stopoffset = " 0%" stop-color = " hsl(var(--on-hue1),90%,70%)" /> < stopoffset = " 100%" stop-color = " hsl(var(--on-hue2),90%,70%)" /> </ linearGradient> < linearGradientid = " switch-gradient2" x1 = " 0.7" y1 = " 0" x2 = " 0.3" y2 = " 1" > < stopoffset = " 25%" stop-color = " hsla(var(--on-hue1),90%,70%,0)" /> < stopoffset = " 50%" stop-color = " hsla(var(--on-hue1),90%,70%,0.3)" /> < stopoffset = " 100%" stop-color = " hsla(var(--on-hue2),90%,70%,0.3)" /> </ linearGradient> </ defs> < pathfill = " none" filter = " url(#switch-glow)" stroke = " url(#switch-gradient1)" stroke-width = " 1" stroke-dasharray = " 0 104.26 0" stroke-dashoffset = " 0.01" stroke-linecap = " round" d = " m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z" /> </ svg> < spanclass = " switch__knob-shadow" > </ span> < spanclass = " switch__knob-container" > < spanclass = " switch__knob" > < svgclass = " switch__knob-neon" viewBox = " 0 0 48 48" width = " 48px" height = " 48px" > < circlefill = " none" stroke = " url(#switch-gradient2)" stroke-dasharray = " 0 90.32 0 54.19" stroke-linecap = " round" stroke-width = " 1" r = " 23" cx = " 24" cy = " 24" transform = " rotate(-112.5,24,24)" /> </ svg> </ span> </ span> < spanclass = " switch__led" > </ span> < spanclass = " switch__text" > </ span> </ label> </ body> </ html>
![[OpenHarmony5.0][Docker][环境]OpenHarmony5.0 Docker编译环境镜像下载以及使用方式](https://img-blog.csdnimg.cn/img_convert/2898e509ccae8841516a4efa429d094f.png)
