怎么用純CSS實(shí)現(xiàn)一個(gè)足球場(chǎng)的俯視圖

這篇文章主要為大家展示了“怎么用純CSS實(shí)現(xiàn)一個(gè)足球場(chǎng)的俯視圖”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么用純CSS實(shí)現(xiàn)一個(gè)足球場(chǎng)的俯視圖”這篇文章吧。

　　代碼解讀

　　定義dom，容器中包含場(chǎng)地，場(chǎng)地中再包含中線、中點(diǎn)、中圈、禁區(qū)、罰球點(diǎn)、罰球弧、球門區(qū)、角球區(qū)等元素：

　　<divclass="container">

　　<divclass="field">

　　<spanclass="halfway-line"></span>

　　<spanclass="centre-circle"></span>

　　<spanclass="centre-mark"></span>

　　<spanclass="penalty-area"></span>

　　<spanclass="penalty-mark"></span>

　　<spanclass="penalty-arc"></span>

　　<spanclass="goal-area"></span>

　　<spanclass="corner-arc"></span>

　　</div>

　　</div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background:radial-gradient(sandybrown,maroon);

　　}

　　定義容器尺寸：

　　.container{

　　width:120em;

　　height:80em;

　　background-color:green;

　　font-size:5px;

　　}

　　.containerspan{

　　display:block;

　　}

　　定義線型：

　　.container{

　　--line:0.3emsolidwhite;

　　}

　　畫(huà)出場(chǎng)地邊線：

　　.container{

　　padding:5em;

　　}

　　.field{

　　width:inherit;

　　height:inherit;

　　border:var(--line);

　　}

　　畫(huà)出中線：

　　.halfway-line{

　　width:calc(120em/2);

　　height:80em;

　　border-right:var(--line);

　　}

　　畫(huà)出中圈：

　　.field{

　　position:relative;

　　}

　　.centre-circle{

　　width:20em;

　　height:20em;

　　border:var(--line);

　　border-radius:50%;

　　position:absolute;

　　top:calc((80em-20em)/2);

　　left:calc((120em-20em-0.3em)/2);

　　}

　　畫(huà)出中點(diǎn)：

　　.centre-mark{

　　width:2em;

　　height:2em;

　　background-color:white;

　　border-radius:50%;

　　position:absolute;

　　top:calc(80em/2-1em);

　　left:calc(120em/2-1em+0.3em/2);

　　}

　　畫(huà)出禁區(qū)：

　　.penalty-area{

　　width:18em;

　　height:44em;

　　border:var(--line);

　　position:absolute;

　　top:calc((80em-44em)/2);

　　left:-0.3em;

　　}

　　畫(huà)出罰球點(diǎn)：

　　.penalty-mark{

　　width:2em;

　　height:2em;

　　background-color:white;

　　border-radius:50%;

　　position:absolute;

　　top:calc(80em/2-1em);

　　left:calc(12em-1em);

　　}

　　畫(huà)出罰球弧：

　　.penalty-arc{

　　width:20em;

　　height:20em;

　　border:var(--line);

　　border-radius:50%;

　　position:absolute;

　　top:calc((80em-20em)/2);

　　left:calc(12em-20em/2);

　　}

　　隱藏罰球弧左側(cè)弧線，只留右側(cè)弧線：

　　.field{

　　z-index:1;

　　}

　　.penalty-area{

　　background-color:green;

　　}

　　.penalty-arc{

　　z-index:-1;

　　}

　　畫(huà)出球門區(qū)：

　　.goal-area{

　　width:6em;

　　height:20em;

　　border:var(--line);

　　position:absolute;

　　top:calc((80em-20em)/2);

　　left:-0.3em;

　　}

　　畫(huà)出角球區(qū)：

　　.field{

　　overflow:hidden;

　　}

　　.corner-arc::before,

　　.corner-arc::after{

　　content:'';

　　position:absolute;

　　width:5em;

　　height:5em;

　　border:0.3emsolidwhite;

　　border-radius:50%;

　　--offset:calc(-5em/2-0.3em);

　　left:var(--offset);

　　}

　　.corner-arc::before{

　　top:var(--offset);

　　}

　　.corner-arc::after{

　　bottom:var(--offset);

　　}

　　把dom中的子元素復(fù)制出一份，左右兩側(cè)各一份：

　　<divclass="container">

　　<divclass="field">

　　<divclass="left">

　　<spanclass="halfway-line"></span>

　　<spanclass="centre-circle"></span>

　　<spanclass="centre-mark"></span>

　　<spanclass="penalty-area"></span>

　　<spanclass="penalty-mark"></span>

　　<spanclass="penalty-arc"></span>

　　<spanclass="goal-area"></span>

　　<spanclass="corner-arc"></span>

　　</div>

　　<divclass="right">

　　<spanclass="halfway-line"></span>

　　<spanclass="centre-circle"></span>

　　<spanclass="centre-mark"></span>

　　<spanclass="penalty-area"></span>

　　<spanclass="penalty-mark"></span>

　　<spanclass="penalty-arc"></span>

　　<spanclass="goal-area"></span>

　　<spanclass="corner-arc"></span>

　　</div>

　　</div>

　　</div>

　　右側(cè)的樣式與左側(cè)相同，只需要水平翻轉(zhuǎn)即可：

　　.right{

　　position:absolute;

　　top:0;

　　left:50%;

　　transform:rotateY(180deg);

　　}

以上是“怎么用純CSS實(shí)現(xiàn)一個(gè)足球場(chǎng)的俯視圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！