介绍 & lt; div类=癱ontainer"比;
& lt; div类=癴ield"祝辞
& lt;跨类=癶alfway-line"祝辞& lt;/span>
& lt;跨类=癱entre-circle"祝辞& lt;/span>
& lt;跨类=癱entre-mark"祝辞& lt;/span>
& lt;跨类=皃enalty-area"祝辞& lt;/span>
& lt;跨类=皃enalty-mark"祝辞& lt;/span>
& lt;跨类=皃enalty-arc"祝辞& lt;/span>
& lt;跨类=癵oal-area"祝辞& lt;/span>
& lt;跨类=癱orner-arc"祝辞& lt;/span>
& lt;/div>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景:径向渐变(黄褐色,栗色);
} 。容器{
宽度:120 em;
身高:80 em;
背景颜色:绿色;
字体大小:5 px;
}
.container跨度{
显示:块;
} 。容器{
——线:0.3 em纯白色;
} 。容器{
填充:5 em;
}
.field {
宽度:继承;
高度:继承;
边界:var(——线);
} 。中线{
宽度:钙(120 em/2);
身高:80 em;
边境:var(——线);
} 。字段{
位置:相对;
}
.centre-circle {
宽度:20 em;
高度:20 em;
边界:var(——线);
这个特性:50%;
位置:绝对的;
上图:钙(20 (80 em - em)/2);
左:钙((120 em - 20 em - 0.3 em)/2);
} 。中点{
宽:2 em;
高度:2 em;
背景颜色:白色;
这个特性:50%;
位置:绝对的;
上图:钙(80 em/2 - 1 em);
左:钙(120 em/2 - 1 em + 0.3 em/2);
} 。禁区{
宽度:18 em;
高度:44 em;
边界:var(——线);
位置:绝对的;
上图:钙((80 em - 44 em)/2);
左:-0.3 em;
} 。点球罚球点{
宽:2 em;
高度:2 em;
背景颜色:白色;
这个特性:50%;
位置:绝对的;
上图:钙(80 em/2 - 1 em);
左:钙(12 em - 1 em);
} 。penalty-arc {
宽度:20 em;
高度:20 em;
边界:var(——线);
这个特性:50%;
位置:绝对的;
上图:钙(20 (80 em - em)/2);
左:钙(12 em - 20 em/2);
} 。字段{
z - index: 1;
}
.penalty-area {
背景颜色:绿色;
}
.penalty-arc {
z - index: 1;
} 。球门区{
宽度:6 em;
高度:20 em;
边界:var(——线);
位置:绝对的;
上图:钙(20 (80 em - em)/2);
左:-0.3 em;
} 。字段{
溢出:隐藏;
}
.corner-arc::,
{后.corner-arc::
内容:& # 39;& # 39;;
位置:绝对的;
宽度:5 em;
身高:5 em;
边界:0.3 em固体白色;
这个特性:50%;
——抵消:钙(5 em/2 - 0.3 em);
左:var(抵消);
}
{前.corner-arc::
上图:var(抵消);
}
{后.corner-arc::
底部:var(抵消);
} & lt; div类=癱ontainer"比;
& lt; div类=癴ield"祝辞
& lt; div类=發eft"祝辞
& lt;跨类=癶alfway-line"祝辞& lt;/span>
& lt;跨类=癱entre-circle"祝辞& lt;/span>
& lt;跨类=癱entre-mark"祝辞& lt;/span>
& lt;跨类=皃enalty-area"祝辞& lt;/span>
& lt;跨类=皃enalty-mark"祝辞& lt;/span>
& lt;跨类=皃enalty-arc"祝辞& lt;/span>
& lt;跨类=癵oal-area"祝辞& lt;/span>
& lt;跨类=癱orner-arc"祝辞& lt;/span>
& lt;/div>
& lt; div类=皉ight"祝辞
& lt;跨类=癶alfway-line"祝辞& lt;/span>
& lt;跨类=癱entre-circle"祝辞& lt;/span>
& lt;跨类=癱entre-mark"祝辞& lt;/span>
& lt;跨类=皃enalty-area"祝辞& lt;/span>
& lt;跨类=皃enalty-mark"祝辞& lt;/span>
& lt;跨类=皃enalty-arc"祝辞& lt;/span>
& lt;跨类=癵oal-area"祝辞& lt;/span>
& lt;跨类=癱orner-arc"祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt;/div>
这篇文章主要介绍了使用纯CSS实现一个足球场俯视图的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含场地,场地中再包含中线,中点,中圈,禁区,罚球点,罚球弧,球门区,角球区等元素:
居中显示:
定义容器尺寸:
定义线型:
画出场地边线:
画出中线:
画出中圈:
画出中点:
画出禁区:
画出罚球点:
画出罚球弧:
隐藏罚球弧左侧弧线,只留右侧弧线:
画出球门区:
画出角球区:
把dom中的子元素复制出一份,左右两侧各一份:
