原生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: "";
}

.stage {
	position: relative;
	top: 2vh;
	width: min(96vw, 1100px);
	min-height: 100vh;
	padding: clamp(12px, 2vmin, 24px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(8vh, 3vmin, 32px);
	z-index: 2;
}

.clock {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--clock-size);
	height: var(--clock-size);
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 50%,
		#fdfdfd 0%,
		#ececec 52%,
		#dadada 100%
	);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5),
		inset 0 8px 12px rgba(255, 255, 255, 0.7),
		inset 0 -8px 12px rgba(0, 0, 0, 0.3);
}

.clock::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--rim-thickness));
	border-radius: 50%;
	background: linear-gradient(
		145deg,
		#c7c7c7,
		#f9f9f9 40%,
		#d3d3d3 60%,
		#a5a5a5
	);
	box-shadow: inset 0 8px 12px rgba(255, 255, 255, 0.6),
		inset 0 -8px 12px rgba(0, 0, 0, 0.4);
	z-index: -1;
}

.clock::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(
		circle at 30% 25%,
		rgba(255, 255, 255, 0.45) 0%,
		rgba(255, 255, 255, 0.1) 40%,
		rgba(255, 255, 255, 0) 75%
	);
	mix-blend-mod.........完整代码请登录后点击上方下载按钮下载查看