div+css实现白昼夜晚切换效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现白昼夜晚切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css"> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900'> <style> :root { --color-light: white; --bgpos-light: 49% 26%; --bgmode-light: darken; --bgimg-light: var(--limg); --color-dark: #333844; --bgpos-dark: 52% 42%; --bgmode-dark: lighten; --bgimg-dark: var(--dimg); } @media (prefers-color-scheme: light) { :root { --fg: var(--color-dark); --bg: var(--color-light); --bgpos: 48.5% 20%; --bgimg: var(--bgimg-light); --bgmode: var(--bgmode-light); } } @media (prefers-color-scheme: dark) { :root { --fg: var(--color-light); --bg: var(--color-dark); --bgpos: var(--bgpos-dark); --bgimg: var(--bgimg-dark); --bgmode: var(--bgmode-dark); } } [data-light], [data-dark] { opacity: 0; } @media (prefers-color-scheme: dark) { [data-dark] { opacity: 1; } #color-scheme:checked + #app { --fg: var(--color-dark); --bg: var(--color-light); --bgpos: var(--bgpos-light); --bgimg: var(--bgimg-light); --bgmode: var(--bgmode-light); } #color-scheme:checked + #app [data-light] { opacity: 1; } #color-scheme:checked + #app [data-dark] { opacity: 0; } } @media (prefers-color-scheme: light) { [data-light] { opacity: 1; } #color-scheme:checked + #app { --fg: var(--color-light); --bg: var(--color-dark); --bgpos: var(--bgpos-dark); --bgimg: var(--bgimg-dark); --bgmode: var(--bgmode-dark); } #color-scheme:checked + #app [data-light] { opacity: 0; } #color-scheme:checked + #app [data-dark] { opacity: 1; } } #active, #prefer { font-size: 1em; font-weight: 200; font-family: consolas, menlo, monospace; z-index: 2; position: relative; } #prefer { font-size: 0.875em; } @media (prefers-color-scheme: light) { #prefer [data-light] { opacity: 1 !important; } #prefer [data-dark] { opacity: 0 !important; } } @media (prefers-color-scheme: dark) { #prefer [data-light] { opacity: 0 !important; } #prefer [data-dark] { opacity: 1 !important; } } #prefer span, #active span { position: absolute; transform: translateX(0.5em); transition: all 0.5s ease; } .bg { opacity: 0.5; background-image: var(--bgimg); background-position: var(--bgpos); mix-blend-mode: var(--bgmode); } body, html { font-family: "Heebo", sans-se.........完整代码请登录后点击上方下载按钮下载查看
网友评论0