css+js实现暗黑主题模式切换开关效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现暗黑主题模式切换开关效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,90%); --fg: hsl(var(--hue),90%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.4s; --trans-timing: cubic-bezier(0.83,0,0.17,1); font-size: calc(48px + (72 - 48) * (100vw - 320px) / (2560 - 320)); } body, input { font: 1em/1.5 sans-serif; } body { background-color: var(--bg); color: var(--fg); display: flex; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .switch, .switch__input, .switch__scene { display: block; position: relative; } .switch, .switch__input { border-radius: 0.75em; -webkit-tap-highlight-color: transparent; } .switch { margin: auto; } .switch__input { background-image: linear-gradient(hsl(213,90%,60%),hsl(193,70%,60%)); box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0); cursor: pointer; outline: transparent; width: 3em; height: 1.5em; -webkit-appearance: none; appearance: none; transition: box-shadow 0.15s linear; } .switch__input:focus-visible { box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,1); } .switch__input:before { background-color: hsl(3,90%,50%); background-image: linear-gradient(hsla(253,90%,50%,1),hsla(253,90%,50%,0)); border-radius: inherit; content: ""; display: block; opacity: 0; position: absolute; width: inherit; height: inherit; transition: background-color var(--trans-dur) var(--trans-timing), opacity var(--trans-dur) var(--trans-timing); } .switch__cloud, .switch__handle, .switch__handle-side, .switch__handle-side circle, .switch__moon-hole, .switch__star, .switch__star use, .switch__stars { transition: opacity var(--trans-dur) var(--trans-timing), transform var(--trans-dur) var(--trans-timing); } .switch__cloud { transform: translate(34px,9px); transform-origin: 4.5px 4px; } .switch__cloud:nth-child(2) { transform: translate(24px,13px) scale(0.8); transition-delay: 0.2s; } .switch__cloud:nth-child(3) { transform: translate(24px,5px) scale(0.6); transition-delay: 0.1s; } .switch__handle { transform: translate(12px,12px); } .switch__moon-hole { transform: translate(16px,0); } .switch__scene { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: auto; } .switch__star, .switch__star use { transform-origin: 2px 2px; } .switch__star { transform: translate(28px,14px) scale(0) rotate(20deg); } .switch__star use { transform: scale(0); } .switch__star:nth-child(2) { transform: translate(21px,13px) scale(0) rotate(-20deg); } .switch__star:nth-child(3) { transform: translate(17px,10px) scale(0) rotate(20deg); } .switch__star:nth-child(4) { transform: translate(24px,6px) scale(0) rotate(-20deg); } .switch__star:nth-child(5) { transform: translate(31px,5px) scale(0) rotate(20deg); } .switch__stars { opacity: 0; } .switch__text { overflow: hidden; position: absolute; width: 1px; height: 1px; } /* Dark theme */ :has(.switch__input:checked) { --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); } .switch__input:checked:before { background-color: hsl(223,90%,60%); opacity: 1; } .switch__input:checked + .switch__scene .switch__cloud { opacity: 0; transform: translate(34px,24px); transition-duration: 0.25s, var(--trans-dur); transition-delay: 0s; } .switch__input:checked + .switch__scene .switch__cloud:nth-child(2) { transform: translate(24px,24px) scale(0.8); } .switch__input:checked + .switch__scene .switch__cloud:nth-child(3) { transform: translate(24px,24px) scale(0.6); } .switch__input:checked + .switch__scene .switch__handle { transform: translate(36px,12px); } .switch__input:checked + .switch__scene .switch__handle-side:first-child circle:nth-child(2){ transform: scale(0.75); } .switch__input:checked + .switch__scene .switch__handle-side:nth-child(2), .switch__input:checked + .switch__scene .switch__stars { opacity: 1; } .switch__input:checked + .switch__scene .switch__moon-hole { transform: translate(0,0); } .switch__input:checked + .switch__scene .switch__star { transform: translate(18px,14px) scale(1) rotate(-20deg); } .switch__input:checked + .switch__scene .switch__star use { transform: scale(1); transition: opacity var(--trans-dur) var(--trans-timing), transform 0.5s cubic-bezier(0.65,0,0.35,2); } .switch__input:checked + .switch__scene .switch__star:nth-child(2) { transform: translate(11px,13px) scale(0.8) rotate(20deg); } .switch__input:checked + .switch__scene .switch__star:nth-child(2), .switch__input:checked + .switch__scene .switch__star:nth-child(2) use { transition-delay: 0.2s; } .switch__input:checked + .switch__scene .switch__star:nth-child(3) { transform: translate(7px,10px) scale(0.6) rotate(-20deg); } .switch__input:checked + .switch__scene .switch__star:nth-child(3), .switch__input:checked + .switch__scene .switch__star:nth-child(3) use { transition-delay: 0.05s; } .switch__input:checked + .switch__scene .switch__star:nth-child(4) { transform: translate(14px,6px) scale(0.6) rotate(20deg); } .switch__input:checked + .switch__scene .switch__star:nth-child(4), .switch__input:checked + .switch__scene .switch__star:nth-child(4) use { transition-delay: 0.15s; } .switch__input:checked + .switch__scene .switch__star:nth-child(5) { transform: translate(21px,5px) scale(0.4) rotate(-20deg); } .switch__input:checked + .switch__scene .switch__star:nth-child(5), .switch__input:checked + .switch__scene .switch__star:nth-child(5) use { transition-delay: 0.1s; } /* Pristine state */ :has(.switch--pristine), .switch--pristine *, .switch--pristine *:before { transition: none !important; } </style> </head> <body > <label class="switch"> <input class="switch__input" type="checkbox" role="switch"> <svg class="switch__scene" viewBox="0 0 48 24" width="48px" height="24px" aria-hidden="true"> <symbol id="switch-cloud" viewBox="0 0 10 6"> <path d="m7.5,1c-.238,0-.463.049-.67.........完整代码请登录后点击上方下载按钮下载查看
网友评论0