css实现灯光模式与暗黑模式手机文件管理UI效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现灯光模式与暗黑模式手机文件管理UI效果代码
代码标签: 模式 与 暗黑 模式 手机 文件 管理 UI 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>File manager app (with accessible dark/ light mode switch)</title> <style> @charset "utf-8"; * { box-sizing: inherit; margin: 0; border: none; padding: 0; list-style: none; background: transparent; color: inherit; font: inherit; } .ini--bg { background: rgb(calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*52 + var(--mode)*252)); } .sec--bg { background: rgb(calc(var(--not-mode)*23 + var(--mode)*241), calc(var(--not-mode)*23 + var(--mode)*245), calc(var(--not-mode)*33 + var(--mode)*254)); } .ini--fg { color: rgb(calc(var(--not-mode)*254 + var(--mode)*38), calc(var(--not-mode)*254 + var(--mode)*38), calc(var(--not-mode)*254 + var(--mode)*38)); } .sec--fg { color: #9d9d9d; } nav { position: relative; } button { padding: 0.375em; width: 0.875em; height: 0.875em; border-radius: 50%; } button:focus { outline: none; box-shadow: inset 0 0 0 2px; } [aria-haspopup] { overflow: hidden; background: radial-gradient(circle, currentcolor 38%, transparent calc(38% + 1px)) 50%/26% 26% no-repeat space content-box; text-indent: 100vmax; white-space: nowrap; cursor: pointer; } .popup { --exp: 0; --not-exp: calc(1 - var(--exp)); position: absolute; top: 100%; right: 0; padding: 0.25em; min-width: 9.1em; border-radius: 5px; transform-origin: 100% 0; transform: perspective(5em) rotatex(calc(var(--not-exp)*-90deg)) scale(var(--exp)); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: transform 0.3s; } [aria-expanded=true] + .popup { --exp: 1 ; } .dummy { font-family: purisa, segoe script, comic sans ms, cursive; text-align: center; } [type=radio] { position: absolute; opacity: 0; clip-path: inset(50%); } meter { -moz-appearance: none; width: 100%; height: 0.5em; border-radius: 0.5em; --c0: rgb(calc(var(--not-mode)*31 + var(--mode)*65), calc(var(--not-mode)*191 + var(--mode)*170), calc(var(--not-mode)*168 + var(--mode)*26)); --c1: rgb(calc(var(--not-mode)*12 + var(--mode)*248), calc(var(--not-mode)*29 + var(--mode)*253), calc(var(--not-mode)*27 + var(--mode)*246)); } meter::-webkit-meter-bar { border: none; height: 0.375em; background: transparent; } meter::-webkit-meter-optimum-value { border-radius: 0.375em; background: linear-gradient(90deg, var(--c0) 85%, var(--c1)); } meter::-moz-meter-bar { height: 0.375em; border-radius: 0.375em; background: linear-gradient(90deg, var(--c0) 85%, var(--c1)); } body { --not-mode: calc(1 - var(--mode)); display: grid; place-content: center; min-height: 100vh; font: 1em/1.5 roboto, sans-serif; } #app { display: grid; overflow: hidden; border-radius: 2em; width: 26em; } .view { grid-area: 1/1; } .view--favs { transform: translate(100%); } .view > header { z-index: 2; padding: 1em; } .view > header nav { display: grid; grid-template: max-content/repeat(2, max-content); justify-content: space-between; } .view > header button { color: #fff; filter: Invert(var(--mode)); } .main { z-index: 1; } .wrap { display: grid; padding: 1em; } .wrap--mode { overflow: hidden; padding: 0; } .wrap--mode label { grid-area: 1/1; padding: 0.25em; transform: translate(calc((1 - var(--idx) - var(--mode))*100%)); transition: transform 0.3s; cursor: pointer; } .wrap--types { grid-gap: 1em; } .view--main .wrap--types { grid-template-columns: 1fr 1fr; } .view--favs .wrap--types { grid-auto-flow: column; } .slide { --ll: rgb(calc(var(--not-mode)*73 + var(--mode)*230), calc(var(--not-mode)*73 + var(--mode)*230), calc(var(--not-mode)*75 + var(--mode)*230)); --hl: rgb(calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*52 + var(--mode)*252)); display: grid; grid-gap: 0.75em 0; grid-template-columns: 1fr 1fr; grid-area: 1/1; padding: 0.5em; border-radius: 1em; } .slide > :not(.chart) { --size: calc(2*(0.75em + 2px)); display: grid; background-size: var(--size) var(--size); } .slide > :not(.chart)::before, .slide > :not(.chart)::after { grid-column: 2; } .slide > :not(.chart)::before { color: #9d9d9d; text-transform: capitalize; content: attr(class) " 内存"; } .slide > :not(.chart)::after { font-size: 1.75em; font-weight: 900; content: counter(val) "GB"; } .chart { grid-column: 1/-1; place-self: center; overflow: hidden; position: relative; padding: 27.5%; border-radius: 50%; box-shadow: inset 0 0 1px 2em var(--ll); } .chart::before, .chart::after, .chart .arc { position: absolute; right: 0; left: 0; line-height: 1.125; text-align: center; } .chart::before { bottom: 50%; font-size: 2.125em; font-weight: 700; counter-reset: perc var(--perc); content: counter(perc) "%"; } .chart::after { content: "用量"; } .arc { --a: calc(var(--rel)*360deg); display: grid; top: 0; bottom: 0; transform: rotate(calc((var(--cum) - var(--rel))*360deg)); background: conic-gradient(var(--col) var(--a), transparent 0%); --mask: radial-gradient(closest-side, transparent calc(100% - 2em - 1px), red calc(100% - 2em)); -webkit-mask: var(--mask); mask: var(--mask); } .arc::before, .arc::after { grid-area: 1/1; border-radius: 50%; background: radial-gradient(circle at 50% 1em, var(--col) 1em, transparent calc(1em + 1px)); content: ""; } .arc::after { transform: rotate(var(--a)); } .total { grid-template-columns: 2.5em 1fr; background: radial-gradient(circle, var(--ll) calc(0.75em - 1px), transparent 0.75em) left 0.5em bottom 0.5em no-repeat; counter-reset: val var(--ssum); } .used { grid-template-columns: 4.75em 1fr; background: radial-gradient(circle, var(--col3) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 0.5em bottom 0.5em, radial-gradient(circle, var(--col2) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 1.25em bottom 0.5em, radial-gradient(circle, var(--col1) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 2em bottom 0.5em, radial-gradient(circle, var(--col0) calc(0.75em - 1px), var(--hl) 0.75em calc(0.75em + 1px), transparent calc(0.75em + 2px)) left 2.75em bottom 0.5em; background-repeat: no-repeat; counter-reset: val var(--used); } .tile { padding: 0.5em; border-radius: 1em; background: rgb(calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*44 + var(--mode)*252), calc(var(--not-mode)*52 + var(--mode)*252)); } .tile header { display: grid; grid-template-columns: 1fr max-content; z-index: 2; } .tile h3 { font-size: 1.375em; font-weight: 500; text-transform: capitalize; } .tile nav { place-self: start; grid-area: 1/2; } .ico { margin: -0.5em; width: 5em; height: 5em; color: var(--col); } .info__num { padding-bottom: 0.5em; } .info__num::after { content: " 文件夹"; } .info__rel { font-weight: 500; } .info__rel::after { content: "%"; } </style> </head> <body class="ini--bg ini--fg" style="--mode: 0; --ssum: 256; --unit: 'gb'; --used: 154; --perc: 60; --col0: #feb95a; --col1: #f2c8ee; --col2: #20bfa9; --col3: #ee786c"> <svg width="0" height="0"> <symbol id="f0" viewBox="0 0 90 80" fill="currentcolor" stroke="currentcolor" stroke-linejoin="round"> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0