css实现世界杯小组赛淘汰对战列表代码-html代码-BFW代码库

代码语言：html

代码描述：css实现世界杯小组赛淘汰对战列表代码，chorme浏览器专用

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
 
     <style>
     @import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
  :root{
		/* default values */
		
	  --r16-1-winner:'-';
    --r16-2-winner:'-';
    --r16-3-winner:'-';
    --r16-4-winner:'-';
    --r16-5-winner:'-';
    --r16-6-winner:'-';
    --r16-7-winner:'-';
    --r16-8-winner:'-';
	  --r16-9-winner:'-';
    --r16-10-winner:'-';
    --r16-11-winner:'-';
    --r16-12-winner:'-';
    --r16-13-winner:'-';
    --r16-14-winner:'-';
    --r16-15-winner:'-';
    --r16-16-winner:'-';

		--r8-1-winner:'-';
		--r8-2-winner:'-';
		--r8-3-winner:'-';
		--r8-4-winner:'-';
		--r8-5-winner:'-';
		--r8-6-winner:'-';
		--r8-7-winner:'-';
		--r8-8-winner:'-';

		--r4-1-winner:'-';
		--r4-2-winner:'-';
		--r4-3-winner:'-';
		--r4-4-winner:'-';

		--sm-1-winner:'-';
		--sm-2-winner:'-';

		--spacer-col-width: 1vw;
		--grid-gap-row: 1px;


		/*--flags-only: 1;*/
  }
  /* demo code goes here */
  .bracket{
		anchor-name: --a-bracket;
		position: relative;
		/*outline: 1px dashed red;*/
		height: 80vh;
		display: grid;
		grid-template-columns: repeat(10, 1fr var(--spacer-col-width)) 1fr;
		grid-template-rows: repeat(8,1fr 1fr .5fr .5fr 1fr 1fr);
		gap: var(--grid-gap-row) 0;

		> *{
		
			--grid-col: attr(data-col type(<number>));
			--grid-row: attr(data-row type(<number>));

			grid-column: var(--grid-col);
			grid-row: var(--grid-row) / span 3;
			
		}
		
		label.match{
			position: relative;
			cursor: pointer;
			background: black;
			border: 1px solid var(--clr-lines);
			border-radius: 3px;
			padding: .25em .5em;
			width: 16ch;
	   
			height: 40px;
			text-wrap: nowrap;
			display: grid;
			grid-template-columns: 1fr 10px;
			grid-template-areas: 'label check';
			place-content: center;
			font-size: .75rem;
			/* test for flags only version */
			/*
			@container style(--flags-only){
				font-size: 1.4rem;
				grid-template-columns: 1fr 2ch;
			}
			*
			/*
			&[data-side="right"]{
				grid-template-columns: 10px 1fr;
				grid-template-areas: 'check label';
			}
			*/
			
		
			gap: .25rem;
			transition: background-color 150ms ease-in-out;
pointer-events: none;	
			
    backdrop-filter: blur(10px);
			/* team name inserted here */
			&::before{
				content: var(--label, '');
				grid-area: label;
				white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
			}
			
			input{
				display: none; /* must do this properly*/
			}
			&:has(:hover){
				background-color: rgb(255 255 255 / .15);
			}
			&:has(:checked){
				background: green;
				&::after{
					content: '\2713';
					grid-area: check;
					place-self: center;
					
				}
			}
			place-self: end;
				&:nth-child(even){
					place-self: start;
				}
			&[data-round="16"]{
				pointer-events:auto;
				
			}
			&[data-round="final"]{
				/*grid-column: 9 / span 3;*/
				border-color:green;
			}     
		}
	
		[id="trophy"]{
			position: absolute;
			inset: 0;
			margin: auto;
			opacity: .1;
			z-index: 0;
			pointer-events: none;
		}

		p{
			--grid-col: attr(data-col type(<number>));
			--grid-row: attr(data-row type(<number>));

			grid-column: var(--grid-col);
			grid-row: var(--grid-row) / span 2;
			text-align: center;
		}
  }
	/* DEFINE WINNERS AND INSERT TEAMS INTO EACH ROUND 
	- this would of course be simpler with JS but then where is the fun in that ? 
	*/
	.bracket{
		/*  round 16- define winners */
		&:has(#r16-team-1:checked)  { --r16-1-winner:  var(--team-1);        }
		&:has(#r16-team-2:checked)  { --r16-1-winner:  var(--team-2);        }
		&:has(#r16-team-3:checked)  { --r16-2-winner:  var(--team-3);        }
		&:has(#r16-team-4:checked)  { --r16-2-winner:  var(--team-4);        }
		&:has(#r16-team-5:checked)  { --r16-3-winner:  var(--team-5);        }
		&:has(#r16-team-6:checked)  { --r16-3-winner:  var(--team-6);        }
		&:has(#r16-team-7:checked)  { --r16-4-winner:  var(--team-7);        }
		&:has(#r16-team-8:checked)  { --r16-4-winner:  var(--team-8);        }
		&:has(#r16-team-9:checked)  { --r16-5-winner:  var(--team-9);        }
		&:has(#r16-team-10:checked) { --r16.........完整代码请登录后点击上方下载按钮下载查看