高防服务器

怎么用纯CSS实现一个足球场的俯视图


怎么用纯CSS实现一个足球场的俯视图

发布时间:2022-02-28 15:38:47 来源:高防服务器网 阅读:95 作者:小新 栏目:web开发

这篇文章主要为大家展示了“怎么用纯CSS实现一个足球场的俯视图”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用纯CSS实现一个足球场的俯视图”这篇文章吧。

  代码解读

  定义dom,容器中包含场地,场地中再包含中线、中点、中圈、禁区、罚球点、罚球弧、球门区、角球区等元素:

  <divclass="container">

  <divclass="field">

  <spanclass="halfway-line"></span>

  <spanclass="centre-circle"></span>

  <spanclass="centre-mark"></span>

  <spanclass="penalty-area"></span>

  <spanclass="penalty-mark"></span>

  <spanclass="penalty-arc"></span>

  <spanclass="goal-area"></span>

  <spanclass="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;

  }

  .containerspan{

  display:block;

  }

  定义线型:

  .container{

  –line:0.3emsolidwhite;

  }

  画出场地边线:

  .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.3emsolidwhite;

  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中的子元素复制出一份,左右两侧各一份:

  <divclass="container">

  <divclass="field">

  <divclass="left">

  <spanclass="halfway-line"></span>

  <spanclass="centre-circle"></span>

  <spanclass="centre-mark"></span>

  <spanclass="penalty-area"></span>

  <spanclass="penalty-mark"></span>

  <spanclass="penalty-arc"></span>

  <spanclass="goal-area"></span>

  <spanclass="corner-arc"></span>

  </div>

  <divclass="right">

  <spanclass="halfway-line"></span>

  <spanclass="centre-circle"></span>

  <spanclass="centre-mark"></span>

  <spanclass="penalty-area"></span>

  <spanclass="penalty-mark"></span>

  <spanclass="penalty-arc"></span>

  <spanclass="goal-area"></span>

  <spanclass="corner-arc"></span>

  </div>

  </div>

  </div>

  右侧的样式与左侧相同,只需要水平翻转即可:

  .right{

  position:absolute;

  top:0;

  left:50%;

  transform:rotateY(180deg);

  }

以上是“怎么用纯CSS实现一个足球场的俯视图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注高防服务器网行业资讯频道!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[