css实现页面白天和夜晚模式切换效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现页面白天和夜晚模式切换效果代码
代码标签: 白天和 ( 白 天和 ) 夜晚 模式 切换 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> @charset "UTF-8"; :root { --sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif; } :root[color-mode=dark] { --surface: #243447; --primary-text: #ffffff; --secondary-text: #ec3479; --link-text: #ed4886; } :root[color-mode=light] { --surface: #f3e5f5; --primary-text: #212121; --secondary-text: #303f9f; --link-text: #303f9f; } *, *:before, *:after { box-sizing: border-box; } body, html { margin: 0; height: 100%; font-size: 1rem; line-height: 1.4rem; font-family: var(--sans); background-color: #243447; background-color: var(--surface, #243447); color: #ffffff; color: var(--primary-text, #ffffff); } p, blockquote, li { text-align: justify; line-height: 1.5rem; } blockquote { position: relative; padding: 2rem 0; width: 100%; margin: 40px auto; border-top: solid 3px; border-bottom: solid 3px; border-color: #ec3479; border-color: var(--secondary-text, #ec3479); } blockquote:after { position: absolute; content: "”"; color: #ec3479; color: var(--secondary-text, #ec3479); font-size: 8rem; bottom: -40px; right: 10px; } a, a:link, a:visited { color: #f59abd; color: var(--link-text, #f59abd); } form .description { text-align: center; margin-bottom: 1rem; } form .switch { position: relative; width: 18rem; height: 3rem; margin: 0 auto; font-size: 0; } form .switch input { position: absolute; top: 0; z-index: 2; opacity: 0; cursor: pointer; height: 3rem; width: 6rem; left: 6rem; margin: 0; } form .switch input:checked { z-index: 1; } form .switch input:checked ~ .toggle-outside .toggle-inside { left: 0.25rem; } form .switch input:checked + label { opacity: 1; cursor: default; } form .switch input:not(:checked) + label:hover { opacity: 0.5; } form .switch label { color: #ffffff; color: var(--primary-text, #ffffff); opacity: 0.33; transition: opacity 0.25s ease; cursor: pointer; font-size: 1rem; line-height: 3rem; display: inline-block; width: 6rem; height: 100%; margin: 0; text-align: center; } form .switch label:last-of-type { margin-left: 6rem; } form .switch .toggle-outside { height: 100%; border-radius: 2rem; padding: 0.25rem; overflow: hidden; transition: 0.5s ease all; background: #fff; position: absolute; width: 6rem; left: 6rem; box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); } form .switch .toggle-inside { border-radius: 5rem; background: #192432; position: absolute; transition: 0.25s ease all; height: 2.5rem; width: 2.5rem; } form .switch .toggle-inside:before { font-family: "Font Awesome 5 Free"; font-size: 1rem; font-weight: 900; content: ""; font-style: normal; color: #ffffff; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; display: inline-block; position: absolute; z-index: 3; margin: 20% auto; left: 0; right: 0; text-align: center; color: #b2ebf2; } form .switch input ~ input:checked ~ .toggle-outside .toggle-inside { left: 3.25rem; background-color: #fbc02d; } form .switch input ~ input:checked ~ .toggle-outside .toggle-inside:before { content: ""; color: #ff5722; } form .switch input#on:focus ~ .toggle-outside .toggle-inside { background-color: #b2ebf2; } form .switch input#on:focus ~ .toggle-outside .toggle-inside:before { color: #192432; } form .switch input#off:focus ~ .toggle-outside .toggle-inside { background-color: #ff5722; } form .switch input#off:focus ~ .toggle-outside .toggle-inside:before { color: #fbc02d; } .wrapper { margin: 0 auto; padding: 1.2rem; display: grid; justify-content: start; align-content: start; gap: 0 30px; grid-template-areas: "widgets" "header" "content" "sidebar" "footer"; } .wrapper .main-head { grid-area: header; font-size: 1.2rem; padding: 1rem 0; color: #ec3479; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0