js+css实现径向时钟显示时间代码-html代码-BFW代码库

js+css实现径向时钟显示时间代码

代码语言：html

所属分类：其他

代码描述：js+css实现径向时钟显示时间代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
     @import url(https://fonts.bunny.net/css?family=lilex:100,300);
@layer base, controls,demo;

@layer demo {
	body{
		font-family: 'Lilex', monospace;
	}
	
	:root{
		--clock-radius: min(80vw, 600px);
		--clock-bg-color: oklch(from var(--clock-base-color) calc(l - 0.65) c h);
		--clock-border-color: var(--clock-base-color);
		
		--rings-trans-duration: 300ms;
		--rings-trans-easing: linear(0, 0.069 8.6%, 0.131 14.6%, 0.204 19.8%, 0.294 24.4%, 0.548 33.3%, 0.999 44.7%, 0.709 53.2%, 0.642 56.7%, 0.62 60.1%, 0.639 63.2%, 0.694 66.4%, 0.999 77.4%, 0.93 81.4%, 0.909 85%, 0.922 88.2%, 0.989 95.7%, 1);

		/* possible colors - for selector and for the clock base color */
		--option-color-1: gainsboro;
		--option-color-2: palevioletred;
		--option-color-3: skyblue;
		--option-color-4: gold;
		--option-color-5: yellowgreen;
		--option-color-6: mediumorchid;
		
		/* all colors.........完整代码请登录后点击上方下载按钮下载查看