svg+css实现足球比赛团队阵型队形展示代码-html代码-BFW代码库

svg+css实现足球比赛团队阵型队形展示代码

代码语言：html

代码描述：svg+css实现足球比赛团队阵型队形展示代码

下面为部分代码预览，完整代码请点击下载或在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, controls,demo;


@layer demo{
	:root{
		--player-transition-duration: 500ms;
		--player-transition-easing: ease-in-out;
		--player-color: white;
		--player-color-gk: #333; /* goalkeeper */
		--player-size: min(5vw, 50px);
	}

	.wrapper{
		
		display: grid;
		gap: 1rem;
		>*{
			/*outline: 1px dashed red;*/
		}

	}
	h1{
		text-align: center;
		font-size: 1rem;
	}
	
	.pitch {
	  display: grid;
	  grid-template-columns: repeat(8, 1fr);
	  grid-template-rows: repeat(9, 1fr);
	  width: min(90vw, 800px);
	  aspect-ratio: 3 / 2;
	  position: relative;
		background:
			/*linear-gradient(90deg, #FFF 1px, #0000 0) 50% no-repeat,*/
			radial-gradient(1q, #0000 5vw, #FFFF 0 calc(5vw + 1px), #0000 0),
		  repeating-linear-gradient(
		    90deg,
		    #3fae5a 0 5vw,
		    #38a352 0 10vw
		  );
	  border: 1px solid white;
		
		&::after{
			content: '';
			position: absolute;
			left: 50%;
			width: 1px;
			height: 100%;
			background-color: white;
		}
		
	}
	
	/* anchor positions - these are what changed according to the formation  */
	.position {
		&.gk  { a.........完整代码请登录后点击上方下载按钮下载查看