原生js+css实现万圣节主题的指针时钟效果代码-html代码-BFW代码库

原生js+css实现万圣节主题的指针时钟效果代码

代码语言：html

代码描述：原生js+css实现万圣节主题的指针时钟效果代码

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

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

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

  
  
<style>
*:not(head, head *, style, script, svg, svg *),
*:not(head, head *, style, script, svg, svg *)::before,
*:not(head, head *, style, script, svg, svg *)::after {
	appearance: none;
	box-sizing: border-box;
}

:root {
	--clock-size: min(70vmin, 55vh, 520px);
	--rim-thickness: calc(var(--clock-size) * 0.05);
	--count-size: min(clamp(84px, 18vmin, 128px), 20vh);
	--arc-bg: #444;
	--arc-inner: black;
	--arc-start: #ff9b1f;
	--arc-end: #ff5a0c;
}

html,
body {
	height: 100%;
	width: 100%;
}

body {
	margin: 0;
	color: #fff;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
		"Helvetica Neue", Arial;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 100vh;
}

figure {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#halloween-clock {
	position: relative;
	background-image: radial-gradient(circle at center, #2c2c2c 0%, #050505 100%);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

#halloween-clock::after {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	--s: 125px;
	--c1: black;
	--c2: #333;

	--_g: var(--c1) 90deg, var(--c2) 0 135deg, #0000 0;
	background: conic-gradient(
			from -45deg at calc(100% / 3) calc(100% / 3),
			var(--c1) 90deg,
			#0000 0
		),
		conic-gradient(from -135deg at calc(100% / 3) calc(2 * 100% / 3), var(--_g)),
		conic-gradient(
			from 135deg at calc(2 * 100% / 3) calc(2 * 100% / 3),
			var(--_g)
		),
		conic-gradient(
			from 45deg at calc(2 * 100% / 3) calc(100% / 3),
			var(--_g),
			var(--c1) 0 225deg,
			var(--c2) 0
		);
	background-size: var(--s) var(--s);
	mix-blend-mode: color-dodge;
	opacity: 0.4;
	z-index: -1;
	content: "&qu.........完整代码请登录后点击上方下载按钮下载查看