原生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) {
backgr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0