扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍了使用纯CSS实现一个足球场俯视图的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
成都服务器托管,成都创新互联提供包括服务器租用、服务器机柜租赁、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、空间域名等业务的一体化完整服务。电话咨询:028-86922220
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); }
感谢你能够认真阅读完这篇文章,希望小编分享使用纯CSS实现一个足球场俯视图的方法内容对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,遇到问题就找创新互联,详细的解决方法等着你来学习!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流