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;font-family:var(--body-font);background-color:var(--body-color);color:var(--text-color)}a{text-decoration:none}.container{max-width:968px;margin-left:var(--mb-1);margin-right:var(--mb-1)}.grid{display:grid}.clock__container{height:100vh;grid-template-rows:1fr max-content}.clock__circle{position:relative;width:200px;height:200px;box-shadow:-6px -6px 16px var(--white-color),6px 6px 16px hsla(var(--hue-color),30%,86%,1),inset 6px 6px 16px hsla(var(--hue-color),30%,86%,1),inset -6px -6px 16px var(--white-color);border-radius:50%;justify-self:center;display:flex;justify-content:center;align-items:center}.clock__content{align-self:center;row-gap:3.5rem}.clock__twelve,.clock__three,.clock__six,.clock__nine{position:absolute;width:1rem;height:1px;background-color:var(--text-color-light)}.clock__twelve,.clock__six{transform:translateX(-50%) rotate(90deg)}.clock__twelve{top:1.25rem;left:50%}.clock__three{top:50%;right:.75rem}.clock__six{bottom:1.25rem;left:50%}.clock__nine{left:.75rem;top:50%}.clock__rounder{width:.75rem;height:.75rem;background-color:var(--first-color);border-radius:50%;border:2px solid var(--body-color);z-index:var(--z-tooltip)}.clock__hour,.clock__minutes,.clock__seconds{position:absolute;display:flex;justify-content:center}.clock__hour{width:105px;height:105px}.clock__hour::before{content:'';position:absolute;background-color:var(--text-color);width:.25rem;height:3rem;border-radius:.75rem;z-index:var(--z-normal)}.clock__minutes{width:136px;height:136px}.clock__minutes::before{content:'';position:absolute;background-color:var(--text-color);width:.25rem;height:4rem;border-radius:.75rem;z-index:var(--z-normal)}.clock__seconds{width:130px;height:130px}.clock__seconds::before{content:'';position:absolute;background-color:var(--first-color);width:.125rem;height:5rem;border-radius:.75rem;z-index:var(--z-normal)}.clock__logo{width:max-content;justify-self:center;margin-bottom:var(--mb-2-5);font-size:var(--smaller-font-size);font-weight:var(--font-medium);color:var(--text-color-light);transition:.3s}.clock__logo:hover{color:var(--first-color)}.clock__text{display:flex;justify-content:center}.clock__text-hour,.clock__text-minutes{font-size:var(--biggest-font-size);font-weight:var(--font-medium);color:var(--title-color)}.clock__text-ampm{font-size:var(--tiny-font-size);color:var(--title-color);font-weight:var(--font-medium);margin-left:var(--mb-0-25)}.clock__date{text-align:center;font-size:var(--small-font-size);font-weight:var(--font-medium)}@media screen and (min-width:968px){.container{margin-left:auto;margin-right:auto}.clock__logo{margin-bottom:3rem}}
</style>
</head>
<body>
<section class="clock container">
<div class="clock__container grid">
<div class="clock__content grid">
<div class="clock__circle"><span class="clock__twelve"></span><span class="clock__three"></span><span class="clock__six"></span><span class="clock__nine"></span>
<div class="clock__rounder"></div>
<div class="clock__hour" id="clock-hour"></div>
<div class="clock__minutes" id="clock-minutes"></div>
<div class="clock__seconds" id="clock-seconds"></div>
<!-- Dark/light button -->
<div class="clock__theme"><i class='bx bxs-moon' id="theme-button"></i></div>
</div>
<div>
<div class="clock__text">
<div class="clock__text-hour" id="text-hour">&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0