css+js实现精美中性支持夜晚模式带日期时钟效果代码-html代码-BFW代码库

css+js实现精美中性支持夜晚模式带日期时钟效果代码

代码语言：html

代码描述：css+js实现精美中性支持夜晚模式带日期时钟效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boxicons.min.css">
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");:root{--hue-color:240;--first-color:hsl(var(--hue-color),53%,49%);--title-color:hsl(var(--hue-color),53%,15%);--text-color:hsl(var(--hue-color),12%,35%);--text-color-light:hsl(var(--hue-color),12%,65%);--white-color:#FFF;--body-color:hsl(var(--hue-color),24%,94%);--body-font:'Poppins',sans-serif;--biggest-font-size:3rem;--small-font-size:.813rem;--smaller-font-size:.75rem;--tiny-font-size:.625rem;--font-medium:500;--mb-0-25:.25rem;--mb-1:1rem;--mb-1-5:1.5rem;--mb-2-5:2.5rem;--z-normal:1;--z-tooltip:10}@media screen and (min-width:968px){:root{--biggest-font-size:3.5rem;--small-font-size:.875rem;--smaller-font-size:.813rem;--tiny-font-size:.75rem}}body.dark-theme{--title-color:hsl(var(--hue-color),12%,95%);--text-color:hsl(var(--hue-color),12%,75%);--body-color:hsl(var(--hue-color),10%,16%)}.clock__theme{position:absolute;top:-1rem;right:-1rem;display:flex;padding:.25rem;border-radius:50%;box-shadow:inset -1px -1px 1px hsla(var(--hue-color),0%,100%,1),inset 1px 1px 1px hsla(var(--hue-color),30%,86%,1);color:var(--first-color);cursor:pointer}.dark-theme .clock__circle{box-shadow:6px 6px 16px hsla(var(--hue-color),8%,12%,1),-6px -6px 16px hsla(var(--hue-color),8%,20%,1),inset -6px -6px 16px hsla(var(--hue-color),8%,20%,1),inset 6px 6px 12px hsla(var(--hue-color),8%,12%,1)}.dark-theme .clock__theme{box-shadow:inset -1px -1px 1px hsla(var(--hue-color),8%,20%,1),inset 1px 1px 1px hsla(var(--hue-color),8%,12%,1)}*{box-sizing:border-box;padding:0;margin:0}body{margin:0;fo.........完整代码请登录后点击上方下载按钮下载查看