純CSS寫個綠蔭足球場,為世界盃喝彩

顏色上白線綠地沒啥問題,發球弧和角球線通過父級的覆蓋可以做到部分弧線效果.

先看一下整體效果:

具體地:

1 )場地外圍我們使用混合色:

background: radial-gradient(sandybrown,maroon);

2 )線條我們要自定義白粗線:

--line: 0.3em
solid
white; 
border: var(--line);

3 )定下整個container容器之後,field為球場區域作為定位父體,內部span通過absolute定位:

.container .field

4 )位置的具體數值可通過數學關係確定:

calc
(計算式子)

5 )css中數值可以通過 –變數名的形式記錄某一數值,後續通過

var(–變數名)呼叫:

body

6 )然後就是關於角球線,可以兩種方法

方法一::before/after在隱藏邊角線的應用.

/*:before 選擇器在被選元素的內容前面插入內容。請使用 content 屬性來指定要插入的內容。*/ .corner-arc ::after, .corner-arc ::before

方法二:製作兩個扇形,定位到相應位置.

.corner-arc-bottom , .corner-arc-top

7 )最後由於半場是關於中線對稱,我們可以做好左邊,以中點(0,50%)旋轉

.right

大體思路就這些,下面是css**和html:

/*中間注釋部分為相對定位實現的,但是不能做到響應式*/ body .container .container span .field .halfway-line .centre-circle, .penalty-arc .centre-circle .centre-mark .penalty-mark .penalty-area .penalty-arc .goal-area .corner-arc .corner-arc ::after, .corner-arc ::before .corner-arc ::before .corner-arc ::after /* .corner-arc-top .corner-arc-bottom */ .right style>

body部分

class="container">
class="field">
class="left">
class="halfway-line">
span>
class="centre-circle">
span>
class="centre-mark">
span>
class="penalty-area">
span>
class="penalty-mark">
span>
class="penalty-arc">
span>
class="goal-area">
span>
class="corner-arc-top">
span>
class="corner-arc-bottom">
span>
div>
class="right">
class="halfway-line">
span>
class="centre-circle">
span>
class="centre-mark">
span>
class="penalty-area">
span>
class="penalty-mark">
span>
class="penalty-arc">
span>
class="goal-area">
span>
class="corner-arc-top">
span>
class="corner-arc-bottom">
span>
div>
div>
div>
body>border="0" width="330" height="86" src="">

純CSS視差滾動

參考旭哥的 demo點這裡 class box class curtain class comehere div div box curtain comehere 1.原理就是利用perspective translatez，使得影象在視覺上縮放，然後通過scale將縮放至原來的大小，但是對於滾動...

純CSS繪製箭頭

這幾天研究別人的發現別人的箭頭居然是用純css寫的。瞬間覺得高大上。細細研究其中的原理，發現其實也很簡單。繪製箭頭，首先應該懂得如何用純css繪製三角形。我們先做乙個寬高為0，有邊框的div看一看效果。width 0 height 0 border 50px solid border color ...

純css畫表情

前端的夥伴們通常提到畫，會想到canvas。很多人致力於用css畫圖，今天用css畫個one兔的形象，其中包括不規則橢圓，圓角三角形，非常有趣哦 class wrap class leftear class lefte class leftea div div div class rightear ...

純CSS寫個綠蔭足球場,為世界盃喝彩

純CSS視差滾動

純CSS繪製箭頭

純css畫表情

相關推薦