css+svg实现五分之一音符圈效果代码-html代码-BFW代码库

css+svg实现五分之一音符圈效果代码

代码语言：html

代码描述：css+svg实现五分之一音符圈效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
html {
	display: grid;
	min-block-size: 100%;
}
body {
	--h: 348;
	--s: 60%;
	--l: 52%;
	--bg: hsl(var(--h) var(--s) var(--l));
	--dark: hsl(var(--h) var(--s) 10%);
	--dark-hover: hsl(var(--h) var(--s) 25%);
	--light: hsl(var(--h) var(--s) 99%);

	--gap: 1.5rem;
	background: var(--bg);
	display: grid;
	height: 100%;
	margin: unset;
	place-content: center;
	padding: var(--gap) unset;
}
h1 {
	color: var(--light);
	display: flex;
	flex-flow: column;
	font-family: 'Bebas Neue', cursive;
	font-size: clamp(4rem, 1.1429rem + 9.1429vw, 8rem);
	line-height: .85;
	margin: calc(2 * var(--gap)) auto;
	width: 50%;
}
h1 span:last-of-type {
	align-self: flex-end;
	color: var(--dark);
}

/* Modifiers */
.blue {
	--h: 206;
	--s: 42%;
	--l: 56%;
}
.vintage {
	--bg: radial-gradient(hsla(var(--h), var(--s), calc(var(--l) - 1%), .99), hsla(var(--h), var(--s), calc(var(--l) - 5%), .8)), 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Circle of Ffths */
.cf {
	aspect-ratio: 1;
	margin-block: var(--gap) 0;
	width: calc(85vw - (2 * var(--gap)));
}
.cf-arcs {
	transform: rotate(-15deg);
	transform-origin: 50% 50%;;
}
.cf-arcs path {
	fill: var(--dark);
	stroke: hsl(var(--h), var(--s), var(--l));
}
.cf-arcs path:hover {
	fill: var(--dark-hover);
}
.cf-text-inner,
.cf-text-middle {
	fill: var(--light);
	font-family: ui-sans-serif, syst.........完整代码请登录后点击上方下载按钮下载查看