原生js+css实现点状排列数字时钟指针动画效果代码-html代码-BFW代码库

原生js+css实现点状排列数字时钟指针动画效果代码

代码语言：html

代码描述：原生js+css实现点状排列数字时钟指针动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url(https://fonts.bunny.net/css?family=roboto-mono:100,700);

@layer base, demo;

@layer demo {
	:root{
		--time-display: none;
	}
	:root:has(input#toggle-time:checked){
		--time-display: block;
	}
  .clock {
    --clock-radius: clamp(120px, 15vw, 340px);
		
     /* toggle time display. 0 = no display, 1 = show time */
    --time-clr: light-dark(rgba(0 0 0 / .5),rgba(255 255 255 / .35));

    
    --dot-radius: 10px;
    --dot-bg: light-dark(rgba(0 0 0 / .5),rgba(255 255 255 / .6)); /* inactive dots */
    --dot-opacity: .2; /* inactive dots */
    
    --dot-hours-clr: rgb(0, 105, 168);
    --dot-mins-clr: rgb(0, 188, 255);
    --dot-secs-clr: rgb(251, 44, 54);
    
    --dot-hours-w: clamp(7px, 1vw,16px);
    --dot-mins-w: clamp(5px, .75vw,12px);
    --dot-secs-w: clamp(5px, .75vw,12px);
    
    --dot-hours-h: clamp(20px, 5vw,60px);
    --dot-mins-h: clamp(10px, 2.5vw,30px);
    --dot-secs-h: var(--dot-secs-w); /* maintains the circle */
    
    --dot-hours-ratio: 1/4;
    --dot-mins-ratio: 1/3;
    --dot-secs-.........完整代码请登录后点击上方下载按钮下载查看