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"></path>
<path d="M220.00,150.00A70,70,0,0,1,210.00,186.05L184.29,170.60A40,40,0,0,0,190.00,150.00Z"></path>
</g>
<g transform="translate(260, 0)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
</g>
<text x="235" y="153" class="cf-text-middle">A</text>
<text x="205" y="152" class="cf-text-inner">F<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M279.90,225.00A150,150,0,0,1,222.72,281.19L198.48,237.46A100,100,0,0,0,236.60,200.00Z"></path>
<path d="M236.60,200.00A100,100,0,0,1,198.48,237.46L183.94,211.22A70,70,0,0,0,210.62,185.00Z"></path>
<path d="M210.62,185.00A70,70,0,0,1,183.94,211.22L169.39,184.98A40,40,0,0,0,184.64,170.00Z"></path>
</g>
<g transform="translate(243.25317547305485, 62.5)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-4"></use>
</g>
<text x="223.6121593216773" y="195.5" class="cf-text-middle">E</text>
<text x="197.63139720814414" y="179.5" class="cf-text-inner">C<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M225.00,279.90A150,150,0,0,1,147.38,299.98L148.25,249.98A100,100,0,0,0,200.00,236.60Z"></path>
<path d="M200.00,236.60A100,100,0,0,1,148.25,249.98L148.78,219.99A70,70,0,0,0,185.00,210.62Z"></path>
<path d="M185.00,210.62A70,70,0,0,1,148.78,219.99L149.30,189.99A40,40,0,0,0,170.00,184.64Z"></path>
</g>
<g transform="translate(197.5, 108.25317547305485)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-4"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-5"></use>
</g>
<text x="192.5" y="226.61215932167727" class="cf-text-middle">B</text>
<text x="177.5" y="199.6313972081441" class="cf-text-inner">G<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M150.00,300.00A150,150,0,0,1,72.744,278.58L98.496,235.72A100,100,0,0,0,150.00,250.00Z"></path>
<path d="M150.00,250.00A100,100,0,0,1,98.496,235.72L113.95,210.00A70,70,0,0,0,150.00,220.00Z"></path>
<path d="M150.00,220.00A70,70,0,0,1,113.95,210.00L129.40,184.29A40,40,0,0,0,150.00,190.00Z"></path>
</g>
<g transform="translate(135, 125)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-1"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-2"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-3"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-4"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-5"></use>
<use width="2" xlink:href="#sharp" class="cf-sharp-6"></use>
</g>
<text x="150" y="238" class="cf-text-middle">G<tspan baseline-shift="super">b</tspan></text>
<text x="150" y="207" class="cf-text-inner">D<tspan baseline-shift="super">#</tspan>m</text>
<g class="cf-arcs">
<path d="M75.000,279.90A150,150,0,0,1,18.807,222.72L62.538,198.48A100,100,0,0,0,100.00,236.60Z"></path>
<path d="M100.00,236.60A100,100,0,0,1,62.538,198.48L88.777,183.94A70,70,0,0,0,115.00,210.62Z"></path>
<path d="M115.00,210.62A70,70,0,0,1,88.777,183.94L115.02,169.39A40,40,0,0,0,130.00,184.64Z"></path>
</g>
<g transform="translate(72.50000000000003, 108.25317547305485)">
<use width="30" xlink:href="#staff"></use>
<use width="2" xlink:href="#flat" class="cf-flat-1"></use>
<use width="2" xlink:href="#flat" class="cf-flat-2"></use>
<use width="2" xlink:href="#flat" class="cf-flat-3"></use>
<use width="2" xlink:href="#flat" class="cf-flat-4"></use>
<use width="2" xlink:href="#flat" class="cf-flat-5"></use>
</g>
<text x="107.50000000000003" y="226.6121593216773" class="cf-text-middle">D<tspan baseline-shift="super">b</tspan></text>
<text x="122.50000000000001" y="199.63139720814414" class="cf-text-inner">B<tspan baseline-shift="super">b</tspan>m</text>
<g class.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0