css布局实现32种吉他和弦效果代码-html代码-BFW代码库

css布局实现32种吉他和弦效果代码

代码语言：html

代码描述：css布局实现32种吉他和弦效果代码，仅限chrome浏览器中运行

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

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

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

  
  
<style>
fret-board {
	--fret-board-bg: light-dark(#EEE, #333);
	--fret-board-fret-c: light-dark(#000, #FFF);
	--fret-board-fret-w: clamp(0.0625rem, 0.03125rem + 0.5cqi, 0.5rem);
	--fret-board-string-c: light-dark(#0008, #FFF8);
	--fret-board-string-w: clamp(0.0625rem, 0.03125rem + 0.5cqi, 0.125rem);

	/* private consts */
	--_frets: attr(frets type(<number>), 4);
	--_strings: attr(strings type(<number>), 6);

	aspect-ratio: 1 / 1;
	background-color: var(--fret-board-bg);
	border-radius: var(--fret-board-bdrs, .5rem);
	box-sizing: border-box;
	container-type: inline-size;
	display: grid;
	font-family: var(--fret-board-ff, inherit);
	grid-template-columns: repeat(calc(var(--_strings) * 2), 1fr);
	grid-template-rows:
		var(--fret-board-top-row-h, 12%)
		repeat(calc(var(--_frets)), 1fr)
		var(--fret-board-bottom-row-h, 15%);
	place-items: center;

	/* Grid Lines (frets and strings) */
	&::before {
		background-color: var(--fret-board-fret-bg, #0000);
		background-image:
			linear-gradient(90deg, var(--fret-board-string-c) var(--fret-board-string-w), #0000 0 var(--fret-board-string-w)),
			linear-gradient(180deg,  var(--fret-board-fret-c) var(--fret-board-fret-w), #0000 0 var(--fret-board-fret-w));
		background-position: 0 var(--fret-board-fret-w), 0 0;
		background-repeat: repeat-x, repeat-y;
		background-size:
			calc(100% / (var(--_strings) - 1) - (var(--fret-board-string-w) / var(--_strings))) calc(100% - (2 * var(--fret-board-fret-w))),
			100% calc(100% / var(--_frets) - (var(--fret-board-fret-w) / var(--_frets)));
		box-shadow: 0 calc(0px - var(--fred-board-fret-bbsw, 1.5cqi)) 0 0 var(--fret-board-fret-c);
		content: '';
		display: block;
		grid-area: 2 / 2 / calc(var(--_frets) + 2) / calc(var(--_strings) * 2);
		height: 100%;
		width: 100%;
	}
	/* Chord Name */
	&::after {
		color: var(--fret-board-chord-c, light-dark(#222, #FFF));
		content: attr(chord);
		font-size: var(--fret-board-chord-fs, 7.5cqi);
		font-weight: var(--fret-board-chord-fw, 500);
		grid-column: 2 / span calc((var(--_strings) * 2) - 2);
		grid-row: calc(var(--_frets) + 2);
		text-align: center;
		width: 100%;
	}

	/* Fret Number (optional). Set <li value="[number]"> to set fret offset */
	ol {
		align-items: center;
		display: grid;
		font-size: var(--fret-board-fret-number-fs, 5cqi);
		font-weight: var(--fret-board-fret-number-fw, 400);
		grid-column: 1;
		grid-row: 2 / span var(--_frets);
		grid-template-rows: repeat(var(--_frets), 1fr);
		height: 100%;
		list-style-position: inside;
		padding: 0;
	}
}

string-note {
	--string-no.........完整代码请登录后点击上方下载按钮下载查看