div+js实现带有暗黑模式切换的数字指针时钟显示时间代码
代码语言:html
所属分类:布局界面
代码描述:div+js实现带有暗黑模式切换的数字指针时钟显示时间代码
代码标签: div js 暗黑 模式 切换 数字 指针 时钟 显示 时间 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Heebo:300&display=swap"); *, *::before, *::after { box-sizing: border-box; } :root { --primary-color: #000; --secondary-color: #fff; } html { transition: all 0.5s ease-in; } html.dark { --primary-color: #fff; --secondary-color: #333; background-color: #111; color: var(--primary-color); } body { font-family: "Heebo", sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .toggle { cursor: pointer; background-color: var(--primary-color); color: var(--secondary-color); border: 0; border-radius: 4px; padding: 8px 12px; position: absolute; top: 100px; } .toggle:focus { outline: none; } .clock-container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .clock { position: relative; width: 200px; height: 200px; } .needle { background-color: var(--primary-color); position: absolute; top: 50%; left: 50%; height: 65px; width: 3px; transform-origin: bottom center; transition: all 0.5s ease-in; } .needle.hour { transform: translate(-50%, -100%) rotate(0deg); } .needle.minute { transform: translate(-50%, -100%) rotate(0deg); height: 100px; } .needle.second { transform: translate(-50%, -100%) rotate(0deg); height: 100px; background-color: #e74c3c; } .center-point { background-color: #e74c3c; width: 10px; height: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .center-point::after { content: ""; background-color: var(--primary-color); width: 5px; height: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .time { font-size: 60px; } .date { color: #aaa; font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; } .date .circle { background-color: var(--primary-color); color: var(--secondary-color); border-radius: 50%; height: 18px; width: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 18px; transition: all 0.5s ease-in; font-size: 12px; } </style> </head> <body> <!-- partial:index.partial.html --> <!-- Inspired by this dribbble shot https://dribbble.com/shots/5958443-Alarm-clock --> <button class="toggle">Dark mode</button> <div class="clock-container"> <div class="clock"> <div class="needle hour"></div> <div class="need.........完整代码请登录后点击上方下载按钮下载查看
网友评论0