摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/BVqXwJ
可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cKbw4Tg
源代碼下載每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀定義 dom,容器中包含場地,場地中再包含中線、中點、中圈、禁區、罰球點、罰球弧、球門區、角球區等元素:
居中顯示:
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); }
畫出禁區:
.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); }
隱藏罰球弧左側弧線,只留右側弧線:
.field { z-index: 1; } .penalty-area { background-color: green; } .penalty-arc { z-index: -1; }
畫出球門區:
.goal-area { width: 6em; height: 20em; border: var(--line); position: absolute; top: calc((80em - 20em) / 2); left: -0.3em; }
畫出角球區:
.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 中的子元素復制出一份,左右兩側各一份:
右側的樣式與左側相同,只需要水平翻轉即可:
.right { position: absolute; top: 0; left: 50%; transform: rotateY(180deg); }
大功告成!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116795.html
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發布的項目 ...
摘要:過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目,用視頻記錄編碼過程,再配合詳細的代碼解讀,是學習前端開發的活的參考書視頻演示如何用純創作一個表達懷念童年心情的條紋彩虹心特效視頻演示如 過往項目 2018 年 5 月份項目匯總(共 30 個項目) 2018 年 4 月份項目匯總(共 8 個項目) 2018 年 6 月份發布的項目 ...
摘要:效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbcPd9?w=500&h=500); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
閱讀 2972·2021-09-22 15:18
閱讀 3395·2019-08-30 15:54
閱讀 3274·2019-08-30 15:53
閱讀 589·2019-08-30 14:12
閱讀 813·2019-08-29 17:01
閱讀 2197·2019-08-29 14:04
閱讀 1379·2019-08-29 13:09
閱讀 861·2019-08-26 17:40