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, system-ui, sans-serif;
	font-weight: 500;
	letter-spacing: -0.065em;
	pointer-events: none;
	text-anchor: middle;
}
.cf-text-inner {
	font-size: .4em;
}
.cf-text-middle {
	font-size: .6em;
}

/* Flat and Sharp Positions */
.cf-flat-1 {
	transform: translate(10px, -2.5px);
}
.cf-flat-2 {
	transform: translate(13px, -7.5px);
}
.cf-flat-3 {
	transform: translate(16px, -1px);
}
.cf-flat-4 {
	transform: translate(19px, -5.5px);
}
.cf-flat-5{
	transform: translate(22px, 1px);
}
.cf-sharp-1 {
	transform: translate(10px, -7.5px);
}
.cf-sharp-2 {
	transform: translate(13px, -3px);
}
.cf-sharp-3 {
	transform: translate(16px, -9px);
}
.cf-sharp-4 {
	transform: translate(19px, -4.5px);
}
.cf-sharp-5 {
	transform: translate(22px, 0.5px);
}
.cf-sharp-6{
	transform: translate(25px, -6px);
}

.cf use {
	pointer-events: none;
}
.cf [baseline-shift="super"] {
	font-size: 80%;
}
</style>


</head>

<body>
  <svg id="app" class="cf" viewBox="0 0 300 300">
		<g class="cf-arcs">
			<path d="M300.00,150.00A150,150,0,0,1,278.58,227.26L235.72,201.50A100,100,0,0,0,250.00,150.00Z"></path>
			<path d="M250.00,150.00A100,100,0,0,1,235.72,201.50L210.00,186.05A70,70,0,0,0,220.00,150.00Z"></p.........完整代码请登录后点击上方下载按钮下载查看