div+css实现雕刻立体开关按钮点击昼夜主题切换效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现雕刻立体开关按钮点击昼夜主题切换效果代码
代码标签: div css 雕刻 立体 开关 按钮 点击 昼夜 主题 切换
下面为部分代码预览,完整代码请点击下载或在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),10%,90%); --fg: hsl(var(--hue),10%,10%); --light-sh: hsla(var(--hue),10%,95%,0.5); --dark-sh: hsla(var(--hue),10%,15%,0.4); --primary: hsl(var(--hue),90%,50%); --primary-t: hsla(var(--hue),90%,50%,0); --trans-dur: 0.3s; font-size: 40px; } 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 { -webkit-tap-highlight-color: transparent; } .switch { display: flex; gap: 0.5em; align-items: center; margin: auto; } .switch__icon, .switch__icon-part { display: block; } .switch__icon { position: relative; width: 1em; height: 1em; transition: filter var(--trans-dur); } .switch__icon-part { background-color: hsla(var(--hue),10%,10%,0.3); position: absolute; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); } .switch__icon--light { filter: drop-shadow(0 0 0.125em hsla(var(--hue),90%,70%,0.2)); } .switch__icon--light .switch__icon-part { background-color: hsla(var(--hue),90%,70%,1); border-radius: 0.125em; top: 50%; left: 50%; width: 0.125em; height: 0.2em; transform-origin: 50% 0; } .switch__icon--light .switch__icon-part--1 { border-radius: 50%; box-shadow: 0 0.0625em 0.0625em var(--dark-sh) inset, 0 0.0625em 0.0625em var(--light-sh); top: 0.3em; left: 0.3em; width: 0.4em; height: 0.4em; } .switch__icon--light .switch__icon-part--2 { box-shadow: 0 0.0625em 0.0625em var(--dark-sh) inset, 0 0.0625em 0.0625em var(--light-sh); transform: translateX(-50%) rotate(0) translateY(0.3em); } .switch__icon--light .switch__icon-part--3 { box-shadow: 0.0625em 0.0625em 0.0625em var(--dark-sh) inset, 0.0625em 0.0625em 0.0625em var(--light-sh); transform: translateX(-50%) rotate(45deg) translateY(0.3em); } .switch__icon--light .switch__icon-part--4 { box-shadow: 0.0625em 0 0.0625em var(--dark-sh) inset, 0.0625em 0 0.0625em var(--light-sh); transform: translateX(-50%) rotate(90deg) translateY(0.3em); } .switch__icon--light .switch__icon-part--5 { box-shadow: 0.0625em -0.0625em 0.0625em var(--dark-sh) inset, 0.0625em -0.0625em 0.0625em var(--light-sh); transform: translateX(-50%) rotate(135deg) translateY(0.3em); } .switch__icon--light .switch__icon-part--6 { box-shadow: 0 -0.0625em 0.0625em var(--dark-sh) inset, 0 -0.0625em 0.0625em var(--light-sh); transform: translateX(-50%) rotate(180deg) translateY(0.3em); } .switch__icon--light .switch__icon-part--7 { box-shadow: -0.0625em -0.0625em 0.0625em var(--dark-sh) inset, -0.0625em -0.0625em 0.0625em var(--light-sh); transform: translateX(-50%) rotate(225deg) translateY(0.3em); } .switch__icon--light .switch__icon-part--8 { box-shadow: -0.0625em 0 0.0625em var(--dark-sh) inset, -0.0625em 0 0.0625em var(--light-sh); transform: translateX(-50%) rotate(270deg) translateY(0.3em); } .switch__icon--light .switch__icon-part--9 { box-shadow: -0.0625em 0.0625em 0.0625em var(--dark-sh) inset, -0.0625em 0.0625em 0.0625em var(--light-sh); transform: translateX(-50%) rotate(315deg) translateY(0.3em); } .switch__icon--dark { filter: drop-shadow(0 0 0.125em hsla(var(--hue),90%,70%,0)) drop-shadow(0 0.0625em 0.0625em var(--light-sh)); } .switch__icon--dark .switch__icon-part--1 { background-color: transparent; border-radius: 50%; clip-path: url(#moon); overflow: hidden; width: 100%; height: 100%; } .switch__icon--dark .switch__icon-part--1a { border-radius: 50%; box-shadow: 0 0.0625em 0.0625em var(--dark-sh) inset; width: 100%; height: 100%; } .switch__icon--dark .switch__icon-part--1b { background-color: transparent; border-radius: 50%; width: 100%; height: 100%; } .switch_.........完整代码请登录后点击上方下载按钮下载查看
网友评论0