這篇文章主要為大家展示了“怎么用純CSS實(shí)現(xiàn)一個(gè)足球場的俯視圖”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么用純CSS實(shí)現(xiàn)一個(gè)足球場的俯視圖”這篇文章吧。
創(chuàng)新互聯(lián)是一家專業(yè)提供太和企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為太和眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
代碼解讀
定義dom，容器中包含場地，場地中再包含中線、中點(diǎn)、中圈、禁區(qū)、罰球點(diǎn)、罰球弧、球門區(qū)、角球區(qū)等元素：
居中顯示：
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;
}
畫出場地邊線：
.container{
padding:5em;
}
.field{
width:inherit;
height:inherit;
border:var(--line);
}
畫出中線：
.halfway-line{
width:calc(120em/2);
height:80em;
border-right:var(--line);
}
畫出中圈：
.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);
}
畫出中點(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);
}
畫出禁區(qū)：
.penalty-area{
width:18em;
height:44em;
border:var(--line);
position:absolute;
top:calc((80em-44em)/2);
left:-0.3em;
}
畫出罰球點(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);
}
畫出罰球?。?/p>
.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;
}
畫出球門區(qū)：
.goal-area{
width:6em;
height:20em;
border:var(--line);
position:absolute;
top:calc((80em-20em)/2);
left:-0.3em;
}
畫出角球區(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è)各一份：
右側(cè)的樣式與左側(cè)相同，只需要水平翻轉(zhuǎn)即可：
.right{
position:absolute;
top:0;
left:50%;
transform:rotateY(180deg);
}
以上是“怎么用純CSS實(shí)現(xiàn)一個(gè)足球場的俯視圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
