程序人生——css绘制世界杯足球场

news2024/11/15 1:50:51

写在之前的话
花有重开日,人无再少年。
疯狂无大小,热爱即疯狂!
足球⚽️,是我大学时期的一门选修课,足球需要场地,场地绘制现在就开始!!!
四年一次的世界杯再卡塔尔进行着,为了与您共享世界杯盛宴,用CSS来绘制一个足球场,让我们一起为世界杯疯狂吧!
足球⚽️

首先,我们来去看一下⚽️足球场是什么样子的。在网上搜索图片之后大概足球场是这个样子的。第一眼望去,这个足球场是由圆形和矩形组成,还有一些渐变的图案
在这里插入图片描述

文章目录

  • 一、⚽️场地设计⚽️
    • 1、规格
    • 2、准备工作
      • 2.1、边线和底线的设置
      • 2.2、解释说明
  • 二、⚽️绘制过程⚽️
      • 1、中线
      • 2、开球点和中圈
      • 3、罚球区
      • 4、球门区
      • 5、球门
      • 6、罚球点、罚球弧、角球弧
      • 7、草坪
  • 三、⚽️开源⚽️
  • 四、⚽️总结⚽️

一、⚽️场地设计⚽️

科普小知识:⚽️现代足球运动起源于英国,当时英制的长度单位是“码”,1码等于0.9144米,约0.915米。 那么,英制长度10码换算成公制长度就是9.15米。 这就是9.15米的来源。

1、规格

在四处搜索足球场规格后,大概足球场一般是如下构造:在图中我们可以看到,足球场设计主要有以下几部分构成:

  1. 整体是矩形,边线和底线,长度是 109131码(90120m),宽度是 49-98码(45~90m)
  2. 中线,贯穿球场
  3. 开球点,位于中线的中心
  4. 中圈,以开球点为圆形,半径为 10码(9.15m)圆
  5. 罚球区(大禁区),长度是44码(40.3m),宽度是18码(16.5m)
  6. 球门区(小禁区),长度是20码(18.3m),宽度是6码(5.5m)
  7. 球门,长度是8码(7.32m)
  8. 罚球点(点球点),距离球门12码(11m)
  9. 罚球弧(禁区弧),以罚球点为圆心,半径为 10码(9.15m)的圆弧
  10. 角球区,以4个角为圆心,半径为 1m的 1/4 圆弧

在这里插入图片描述

2、准备工作

2.1、边线和底线的设置

科普小知识:⚽️2022世界杯决赛将在卢赛尔球场举行,它由中国铁建国际集团承建。以世界杯比赛场地为例,长度115码(105m),宽度74码(68m)。

  1. HTML结构中我用到了如下标签和如下属性设置:

    <filed></filed>
    
  2. 为了尺寸计算方便,采用em相对单位进行换算,数值就可以采用真实的“码”,好处是都是整数,简单绘制一下外围边线和底线,如下

filed{
  font-size: 5px;
  width: 115em; /*表示115码*/
  height: 74em;
  border: 5em solid transparent;
  outline: 2px solid #fff;/*线宽就用固定值*/
  outline-offset: -5em;
  background: #43A63C;
}

2.2、解释说明

  • 注意这里实现的小细节:这里外层的线框是通过outline实现的,还预留了一个5em的透明边框,这是因为背景的位置和尺寸百分比计算是根据内容区域的,并不包含边框。比如,background-postion:0 0表示的就是线框内的左上点,background-postion: 100% 100%表示的就是线框内的右下点,,background-size: 100%表示的就是线框内最大尺寸,如下,透明边框仍然是可以绘制背景的,比如深浅不同的草皮就可以绘制在边框之外,这个后面再说。
    透明边框的好处

  • 准备工作完成了,下面是具体的绘制过程

二、⚽️绘制过程⚽️

  1. 在绘制之前,需要简单规划一下,通过 CSS 变量将各部分分离开来,这样看起来会更加清晰,例如

    filed{
      --中线: xxx;
        --中圈开球点: xxx;
        ...
        background: 
        /*越靠前的背景越靠上*/
        var(--中线),
        var(--中圈开球点),
        ...,
        #43A63C
    }
    

1、中线

  1. 中线,使用线性渐变linear-gradient

    --中线: linear-gradient(#fff, #fff) center/2px 100% no-repeat;
    
  2. 上面这一段 background进行了简写,可以看下面这张图
    背景的简写

  3. 效果如下
    中线

2、开球点和中圈

科普小知识:⚽️球在开出前,其他队员不得进入中圈。

  1. 这是一个半径为10码的圆,可以通过一个径向渐变radial-gradient实现,

    --中圈: radial-gradient( closest-side circle, #fff 2px, transparent 0 calc(100% - 2px), #fff 0 100%, transparent 0) center/20em 20em no-repeat;
    
  2. 关键词closest-side,表示最近的边,可以根据背景尺寸直接控制圆的大小,默认值是farthest-side,其他选项详细如下

    关键字描述
    closest-side渐变中心距离容器最近的边作为终止位置。
    closest-corner渐变中心距离容器最近的角作为终止位置。
    farthest-side渐变中心距离容器最远的边作为终止位置。
    farthest-corner(默认值)渐变中心距离容器最远的角作为终止位置。
  3. 各自的区别如下所示
    径向渐变关键词

  4. 绘制效果如下
    中圈

3、罚球区

科普小知识:罚球区通常也叫大禁区,是一个44码*18码的矩形线框。⚽️守门员在罚球区内可以用手触球,出去就不行了,还有就是在这个区域犯规,容易被判点球

  1. 线性渐变不像径向渐变那样,并不能直接画出这种矩形线框,我采用的方式是覆盖的方式,也就是一块绿色的覆盖在一块白色的背景之上,实现如下

    --大禁区: linear-gradient(#43A63C, #43A63C) left center/calc(18em - 2px) calc(44em - 4px) no-repeat, linear-gradient(#fff, #fff) left center/18em 44em no-repeat;
    
  2. 动态演示如下
    大禁区实现演示

  3. 两边半场都有罚球区域,而且长的也完全一样,两边的罚球区域正好可以通过水平平铺repeat-x实现,只需要改变背景大小就行了,示意如下:
    平铺实现演示

  4. 用代码实现就是

    --大禁区: linear-gradient(to right, #43A63C calc(18em - 2px), transparent 0) 0 center/calc(100% - 18em + 2px) calc(44em - 4px) repeat-x, linear-gradient(to right, #fff 18em, transparent 0) 0 center/calc(100% - 18em) 44em repeat-x;
    
  5. 效果如下
    大禁区

4、球门区

科普小知识:球门区,通常叫小禁区,是一个20码*6码的矩形线框。⚽️球门球时,由守方队员在球门区内任意一点将球放定后踢出
这个和罚球区绘制方法一致,就不多描述了

  1. 球门区,是一个20码*6码的矩形线框。

    --小禁区: linear-gradient(to right, #43A63C calc(6em - 2px), transparent 0) 0 center/calc(100% - 6em + 2px) calc(20em - 4px) repeat-x, linear-gradient(to right, #fff 6em, transparent 0) 0 center/calc(100% - 6em) 20em repeat-x;
    
  2. 效果如下
    小禁区

5、球门

科普小知识:⚽️足球要完全越过门线才算进球,仅超过1/2也不行
这个和上面绘制方法一致,不过需要注意background-position的位置,是负数

  1. 球门在底线后面,由于是俯视图,只需要知道长度8码就行了,宽度可以随便给一个

    --球门: linear-gradient(to right, #43A63C calc(3em - 4px), transparent 0) calc(-3em + 2px) center/calc(100% + 3em) calc(8em - 4px) repeat-x, linear-gradient(to right, #fff 3em, transparent 0) -3em center/calc(100% + 3em) 8em repeat-x;
    
  2. 通过透明可以将背景绘制在边框上,效果如下
    球门

  3. 这样就完成了所有矩形线框的绘制

6、罚球点、罚球弧、角球弧

  1. 首先是罚球点,又称点球点,距离球门12码

科普小知识:⚽️这个相信很多人都知道,12码点球主罚的地方就是这里

  1. 这是一个圆点,直接通过一个径向渐变radial-gradient绘制,这个我们等会再来绘制,先画下面的

  2. 然后是罚球弧,它是以罚球点为圆心,半径为10码的圆弧,和中圈一样

科普小知识:⚽️在罚点球时,除守方守门员和主罚队员外,双方其他队员都必须退出罚球区及罚球弧外,因为到罚球点的距离都是 10 码

  1. 和中圈大小是一样的,只是位置不同,注意圆心距离左侧的距离是12码,由于左右都是一样的,可以用前面提到的repeat-x方式实现(当然这里不写也行,因为默认就是平铺的),示意如下:

    平铺实现演示

  2. 代码实现

    --罚球弧: radial-gradient( circle at 12em center, transparent calc(10em - 2px), #fff 0 10em, transparent 0) 0 center/calc(100% - 24em) 100%;
    
  3. 效果如下
    最上层的罚球弧

  4. 现在这个圆弧覆盖在最上面,由于罚球区是通过覆盖的方式实现的,所以可以将罚球弧放在罚球区下面,通过改变background的先后顺序就可以了,如下

    • 多背景的情况下,前面的背景层级 > 后面的背景层级
      background: 
          /* var(--罚球弧), */
        var(--小禁区),
        var(--大禁区),
        var(--罚球弧), /* 将罚球弧移动到大禁区下面*/
        var(--球门),
        var(--中线),
        var(--中圈),
        #43A63C;
      }
      

    罚球弧

  5. 然后用同样的方式把罚球点补上

    --罚球点: radial-gradient( circle at 12em center, #fff 2px, transparent 0) 0 center/calc(100% - 24em) 100%;
    
  6. 效果如下
    罚球点

  7. 最后是角球弧。位于球场四角,是半径为1m的 1/4 圆弧。

科普小知识:⚽️用来发角球的地方,守方队员在己方半场将球自底线处踢出界外,攻方获得的就是发角球的机会

  1. 如果按照一般的思路,肯定是绘制 4 个 1/4 圆弧就行了,不过这里还可以采用另一种方式。仔细想一下,这4个圆弧合在一起是不是刚好就是一个完整的圆?经过位移、平铺就可以了,思路为:CSS 实现1/4圆平铺,用代码实现就是

    --角球弧: radial-gradient( circle at 1em 1em, transparent calc(1em - 2px), #fff 0 1em, transparent 0) -1em -1em/100% 100%;
    
  2. 这样用一个渐变就同时绘制出了4个圆,效果如下
    4个完整角球弧

  3. 可以看到,4个圆弧已经均匀分布在4个角落了,但是已经超出了线外,这个也非常好解决,默认情况下背景是可以绘制在border-box范围内的,只需要通过background-clip裁剪到content-box内就行了,如下

    --角球弧: radial-gradient( circle at 1em 1em, transparent calc(1em - 2px), #fff 0 1em, transparent 0) -1em -1em/100% 100% content-box;/*添加裁剪区域*/
    
  4. 这样就完美了,
    使用background-clip裁剪后的角球弧

7、草坪

到目前位置,球场的所有部分基本已经完成了,最后再铺上深浅相间的草坪

科普小知识:⚽️不仅仅是为了好看,还能缓解观众和球员的视觉疲劳,同时也方便裁判和球员看清是否越位

  1. 关于草坪的条纹间隔貌似不是很统一?这里就大概给一个数值,用线性渐变即可,如下

    --草坪: linear-gradient(90deg, transparent 50%, rgba(0,0,0,.4) 0% 100%) center/10% 100%;
    
  2. 由于前面罚球区等用到了覆盖的方式,所以这里不能直接将草坪绘制在最底下,需要绘制在最上层,效果如下
    直接覆盖的草坪

  3. 可以看到,仅仅通过半透明的覆盖还是很不自然的,所以需要将颜色混合一下,需要用到background-blend-mode,比较复杂,这里就不展开了,设置如下

    overlay,soft-light,hard-light属于融合混合模式,比较适合这类情况
    background-blend-mode: soft-light /*柔光*/
    
  4. 效果如下
    混合模式
    有点奇怪…原因是上面设置的是所有图层的background-blend-mode,我们其实只需要设置最顶层的草坪,那怎么处理呢?我起初以为background缩写是包含background-blend-mode的,这样的话可以单独给某一层设置了,可惜这个不支持(我猜测这个属性出现的稍晚一些,没有统一到背景里)。没办法,只能逐层设置了,第1层设置 soft-light,剩下的全部都是normal,如下

    background-blend-mode: soft-light, normal,...,normal;
    
  5. 后面的normal可以多,但是不能少,原因在于,会根据背景数量自动补充,如果数量不足,会重新开头循环(这个补充规则其实跟其他背景属性,例如 background-size是一样的)
    混合模式自动填充规则

  6. 这样就非常自然了,效果如下
    最终效果

三、⚽️开源⚽️

filed{
  font-size: 5px;
  width: 115em;
  height: 74em;
  --中线: linear-gradient(#fff, #fff) center/2px 100% no-repeat;
  --中圈: radial-gradient( closest-side circle, #fff 2px, transparent 0 calc(100% - 2px), #fff 0 100%, transparent 0) center/20em 20em no-repeat;
  --大禁区: linear-gradient(to right, #43A63C calc(18em - 2px), transparent 0) 0 center/calc(100% - 18em + 2px) calc(44em - 4px) repeat-x, linear-gradient(to right, #fff 18em, transparent 0) 0 center/calc(100% - 18em) 44em repeat-x;
  --小禁区: linear-gradient(to right, #43A63C calc(6em - 2px), transparent 0) 0 center/calc(100% - 6em + 2px) calc(20em - 4px) repeat-x, linear-gradient(to right, #fff 6em, transparent 0) 0 center/calc(100% - 6em) 20em repeat-x;
  --球门: linear-gradient(to right, #43A63C calc(3em - 4px), transparent 0) calc(-3em + 2px) center/calc(100% + 3em) calc(8em - 4px) repeat-x, linear-gradient(to right, #fff 3em, transparent 0) -3em center/calc(100% + 3em) 8em repeat-x;
  --罚球弧: radial-gradient( circle at 12em center, transparent calc(10em - 2px), #fff 0 10em, transparent 0) 0 center/calc(100% - 24em) 100%;
  --罚球点: radial-gradient( circle at 12em center, #fff 2px, transparent 0) 0 center/calc(100% - 24em) 100%;
  --角球弧: radial-gradient( circle at 1em 1em, transparent calc(1em - 2px), #fff 0 1em, transparent 0) -1em -1em/100% 100% content-box;
  --草坪: linear-gradient(90deg, transparent 50%, rgba(0,0,0,.5) 0% 100%) center/10% 100%;
  background:  
    var(--草坪),
    var(--角球弧),
    var(--罚球点),
    var(--球门),
    var(--小禁区),
    var(--大禁区),
    var(--罚球弧),
    var(--中线),
    var(--中圈),
    #43A63C;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
  border: 5em solid transparent;
  outline: 2px solid #fff;
  outline-offset: -5em;
}

四、⚽️总结⚽️

渐变是 CSS 中非常强大但比较繁琐的功能了,几乎是万能的,能够设计出来的都可以通过渐变绘制出来,只是实现的复杂度问题,擅于发现图形的规律也能有效地减少渐变的复杂度,下面简单总结一下

  1. 背景的位置和尺寸的百分比计算是根据内容区域的,并不包含边框
  2. 透明边框仍然是可以绘制背景的
  3. 通过 CSS 变量将背景各部分分离开来,这样看起来会更加清晰
  4. 线性渐变不像径向渐变那样,并不能直接画出这种矩形线框,可以用两层渐变覆盖的方式实现
  5. 凡事看到相同或相似的图案都可以考虑使用背景平铺来减少工作量
  6. 多背景的情况下,前面的背景层级 > 后面的背景层级
  7. 4 个 1/4圆可以通过一个完整的圆位移平铺实现
  8. 默认情况下背景是可以绘制在边框范围内的,可以通过background-clip改变绘制范围
  9. 背景混合模式并不在background简写属性中,需要单独书写,可以让图层混合更加自然
  10. 背景混合模式会根据背景数量自动补充,如果数量不足,会重新开头循环
    b博客zhu虎康

最最后,祝大家世界杯圆梦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/68032.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电影院网站设计毕业设计,电影院网站的设计与实现,电影院售票系统源码毕设作品参考

项目背景和意义 目的&#xff1a;本课题主要目标是设计并能够实现一个基于web网页的电影院购票选座系统&#xff0c;整个网站项目使用了B/S架构&#xff0c;基于python的Django框架下开发&#xff1b;管理员通过后台录入信息、管理信息&#xff0c;设置网站信息&#xff0c;管理…

KBPC1010-ASEMI液压升降装置方案整流桥10A 1000V

编辑-Z KBPC1010在KBPC-4封装里采用的4个芯片&#xff0c;其尺寸都是100MIL&#xff0c;是一款10A 1000V液压升降装置方案整流桥。KBPC1010的浪涌电流Ifsm为200A&#xff0c;漏电流(Ir)为10uA&#xff0c;其工作时耐温度范围为-65~150摄氏度。KBPC1010采用光阻GPP芯片材质&…

用R语言模拟混合制排队随机服务排队系统

M / M / 1系统 该系统的基本参数:: 使用M / M / 1系统进行仿真非常简单 。 lambda <- 2 mu <- 4 rho <- lambda/mu # 2/4 ..例如&#xff0c; 可以快速可视化随时间变化的资源使用情况。在下面&#xff0c;我们可以看到仿真如何收敛到系统中理论上的平均客户数。 …

单点部署linux命令----linux命令 总结篇

java -jar XXX.jar nohup java -jar xxx.jar & nohup java -jar visual_map-1.0.0.jar >/log/log.txt 2>&1 & nohup java -jar visual_map-1.0.0.jar & nohup java -jar_C18298182575的博客-CSDN博客 java -jar后台启动的四种方式_普通网友的博客-CSD…

基于JavaWeb的大学迎新系统设计与实现(源码+数据库脚本+论文+开题报告)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

NLP命名实体识别

命名实体识别&#xff08;Named Entity Recognition&#xff0c; NER&#xff09;是指在文本中识别出特殊对象&#xff0c;如人、地点、组织机构等。 命名实体识别方法概述 基于规则的方法&#xff1a;利用专家手工制订的规则进行命名实体识别。举例&#xff1a;“赵某出生于…

【动态规划】独立任务最优调度问题

1.题目描述 2.算法思路 我认为做动态规划题的关键是找到一个合适的dp数组&#xff0c;确定它dp[i][j]的含义&#xff0c;用它和题目的最优子结构性质结合求解。具体思路如下&#xff1a; (笔记些许潦草hhh…) 1.dp[i][j]表示第i个作业在第j&#xff08;0-A,1-B&#xff09;台…

Keil setting issue

1, data type default issue caused enter “hard fault during debug” void HardFault_Handler(void) { /* if Hard Fault exception occurs, go to infinite loop */ if(CoreDebug->DHCSR & 1) {//check c DEBUGEN 1 -> Debugger connected __breakpoint(0); //…

小迪-day12(SQL注入简要概述)

1、相关sql函数、语句 1.1 count() 1.1.1 count(column_name) ​ count(column_name)是计算数据库表中指定列有多少行&#xff0c; ​ 例&#xff1a; SELECT COUNT(column_name) FROM table_name1.1.2 count(*) 可以计算表中有多少行&#xff08;有多少条数据&#xff0…

基于 docker 搭建 grafana+prometheus 监控资源之mysql+docker+alertmanager配置(二)(超详细版)

先去看第一篇&#xff08;基础部署篇&#xff09;&#xff0c;看完后&#xff0c;才能接上本篇。 基于 docker 搭建 grafanaprometheus 监控资源之mysqldockeralertmanager配置&#xff08;二&#xff09;环境信息服务基本信息一、安装Mysqld_exporter1.1 标准启动1.2 docker-c…

1554_AURIX_TC275_时钟监控功能以及时钟紧急行为

全部学习汇总&#xff1a; GreyZhang/g_TC275: happy hacking for TC275! (github.com) 这部分还是前面CCU寄存器的一些延续&#xff0c;寄存器支持模块的禁用、禁用状态的查询以及是否支持休眠的控制。 1. 时钟监控是时钟进行安全设计需要考虑的一个手段&#xff0c;支持两种锁…

历史性突破,200层以上存储芯片率先量产,领先国外芯片巨头

近日&#xff0c;中企芯片技术迎来历史性突破&#xff0c;200层以上存储芯片率先量产&#xff0c;领先国外存储芯片巨头&#xff0c;或将成为全球行业领导者。后起之秀&#xff0c;鱼跃龙门 众所周知&#xff0c;存储芯片的生产&#xff0c;不仅需要高端技术&#xff0c;还需要…

MySQL之MVCC

多版本并发控制MVCC&#xff0c;也就是Copy on Write思想。MVCC除了支持读和读并行&#xff0c;还支持读和写并行、写和读并行&#xff0c;但为了保持数据一致性&#xff0c;写和写是无法并行的。 ​ 如下图&#xff0c;在事务1写的时候会copy一个记录的副本&#xff0c;其他事…

编译器做了这么多,你知道吗?

编译器做了什么 从最直观的角度来讲&#xff0c;编译器就是将高级语言翻译成机器语言的一个工具。比如我们用C/C语言写的一个程序可以使用编译器将其翻译成机器可以执行的指令及数据。我们前面也提到了&#xff0c;使用机器指令或汇编语言编写程序是十分费事及乏味的事情&…

LabVIEW编程LabVIEW开发ITECH IT6000D系列电源例程与相关资料

LabVIEW编程LabVIEW开发ITECH IT6000D系列电源例程与相关资料 ​IT6000D系列大功率可编程直流电源可支持多种规格的输出能力&#xff0c;以满足高电流、低电压或高电压、低电流等多种测试需求。同时&#xff0c;相同型号的整机间可并联工作&#xff0c;以实现更强大的输出能力…

settings.py配置文件(详解)

文章目录settings.py配置文件1. settings.py文件介绍1) BASE_DIR2) SECRET_KEY3) DEBUG4) ALLOWED_HOSTS5) INSTALLED_APPS6) MIDDLEWARE7) ROOT_URLCONF8) TEMPLATES9) WSGI_APPLICATION10) DATABASES11) AUTH_PASSWORD_VALIDATORS12) LANGUAGE_CODE和TIME_ZONE13) USE_118N和…

Cy7 Tyramide,Tyramide-Cy7,花青素Cy7 酪酰胺,Cy7酪胺

●外观以及性质&#xff1a; Cy7酪胺含有明亮的Cy7&#xff0c;可以使用标准的Cy7滤波片组轻松检测到。酪胺信号放大&#xff08;TSA&#xff09;是一种特别通用且功能强大的酶扩增技术&#xff0c;具有更高的检测灵敏度。西安凯新生物科技有限公司​为了实现大IHC检测&#xf…

排序算法总结

排序算法 排序算法可以分为内部排序和外部排序 内部排序是数据记录在内存中进行排序 外部排序是因排序的数据很大&#xff0c;一次不能容纳全部的排序记录&#xff0c;在排序过程中需要访问外存。常见的内部排序算法有&#xff1a;插入排序、希尔排序、选择排序、冒泡排序、归并…

Qt-OpenCV学习笔记--人脸识别

前言 本人从事机械设计12年&#xff0c;业余时间自学编程。 2022年4月6日&#xff0c;开始学习C#&#xff0c; 2022年9月7日&#xff0c;开始学习c和Qt&#xff0c; 2022年10月28日&#xff0c;开始学习OpenCV&#xff0c; 今天终于搞定了传说中的 人脸识别 &#xff0c;在…