您好,登錄后才能下訂單哦!
這篇文章主要介紹了使用純CSS實現(xiàn)一個足球場俯視圖的方法,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
https://github.com/comehope/front-end-daily-challenges
定義 dom,容器中包含場地,場地中再包含中線、中點、中圈、禁區(qū)、罰球點、罰球弧、球門區(qū)、角球區(qū)等元素:
<div class="container"> <div class="field"> <span class="halfway-line"></span> <span class="centre-circle"></span> <span class="centre-mark"></span> <span class="penalty-area"></span> <span class="penalty-mark"></span> <span class="penalty-arc"></span> <span class="goal-area"></span> <span class="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; } .container span { display: block; }
定義線型:
.container { --line: 0.3em solid white; }
畫出場地邊線:
.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); }
畫出中點:
.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; }
畫出罰球點:
.penalty-mark { width: 2em; height: 2em; background-color: white; border-radius: 50%; position: absolute; top: calc(80em / 2 - 1em); left: calc(12em - 1em); }
畫出罰球弧:
.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.3em solid white; 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è)各一份:
<div class="container"> <div class="field"> <div class="left"> <span class="halfway-line"></span> <span class="centre-circle"></span> <span class="centre-mark"></span> <span class="penalty-area"></span> <span class="penalty-mark"></span> <span class="penalty-arc"></span> <span class="goal-area"></span> <span class="corner-arc"></span> </div> <div class="right"> <span class="halfway-line"></span> <span class="centre-circle"></span> <span class="centre-mark"></span> <span class="penalty-area"></span> <span class="penalty-mark"></span> <span class="penalty-arc"></span> <span class="goal-area"></span> <span class="corner-arc"></span> </div> </div> </div>
右側(cè)的樣式與左側(cè)相同,只需要水平翻轉(zhuǎn)即可:
.right { position: absolute; top: 0; left: 50%; transform: rotateY(180deg); }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享使用純CSS實現(xiàn)一個足球場俯視圖的方法內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。