原生js实现文章阅读白天与黑夜模式切换效果代码
代码语言:html
所属分类:视觉差异
代码描述:原生js实现文章阅读白天与黑夜模式切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --background: white; --text: black; } body { height: 100vh; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .browser { max-width: 750px; width: 95%; border-radius: 12px; max-height: 650px; position: relative; overflow: hidden; box-shadow: inset 0 0 1px 1px black; } .browser__header { padding: 15px; position: relative; } .browser__header::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: black; content: ""; } .browser__header i { display: inline-block; vertical-align: middle; width: 10px; height: 10px; border-radius: 100px; margin-right: 5px; border: 1px solid black; } .browser__header i:nth-child(1) { background: #E85D75; } .browser__header i:nth-child(2) { background: #EEC643; } .browser__header i:nth-child(3) { background: #79B791; } .browser__content { padding: 20px; padding-bottom: 5vh; } .browser h1, .browser p { color: var(--text); -webkit-transition: color 200ms linear 100ms; transition: color 200ms linear 100ms; } .browser__content p { line-height: 1.5; } .toggle { position: absolute; top: 14px; right: 15px; } .toggle label { position: relative; display: block; width: 50px; height: 22px; background: #fff; border: 1px solid var(--text); border-radius: 100px; cursor: pointer; } .toggle label::before { position: absolute; width: 900px; height: 900px; background: var(--background); z-index: 10; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 100%; opacity: 1; -webkit-transform: translate3d(-47%, 0, 0) scale(0.1); transform: translate3d(-47%, 0, 0) scale(0.1); -webkit-transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, -webkit-transform 400ms ease-in-out; transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, -webkit-transform 400ms ease-in-out; transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, transform 400ms ease-in-out; transition: background 300ms ease-in-out 200ms, opacity 350ms ease-in-out 200ms, transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; pointer-events: none; content: ""; opacity: 0; z-index: -999; } .toggle label::after { position: absolute; top: 0; bottom: 0; left: 4px; margin: auto; width: 14px; height: 14px; background: #fff; border: 1px solid black; content: ""; border-radius: 100px; -webkit-transition: background 200ms linear, -webkit-transform 200ms ease-in-out 100ms; transition: background 200ms linear, -webkit-transform 200ms ease-in-out 100ms; transition: background 200ms linear,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0