纯CSS写个绿荫足球场,为世界杯喝彩
那要写出这样一个界面,首先了解一下球场结构,如图,具体比例就不坐详细说明了自行百度.
颜色上白线绿地没啥问题,发球弧和角球线通过父级的覆盖可以做到部分弧线效果.
先看一下整体效果:
具体地:
1 )场地外围我们使用混合色:
background: radial-gradient(sandybrown,maroon);2 )线条我们要自定义白粗线:
--line: 0.3em solid white;
border: var(--line);3 )定下整个container容器之后,field为球场区域作为定位父体,内部span通过absolute定位:
.container{display:block;}
.field{position:relative:width:inherit;height:ingerit;}4 )位置的具体数值可通过数学关系确定:
calc(计算式子)5 )css中数值可以通过 –变量名 的形式记录某一数值,后续通过
var(–变量名)调用:
body{--num = calc((100px + 0.7px)/3);top:var(--num);}6 )然后就是关于角球线,可以两种方法
方法一::before/after在隐藏边角线的应用.
/*:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。*/
.corner-arc::after,
.corner-arc::before{content: '';position: absolute;width: 5em;height: 5em;border: 0.3em solid white;border-radius: 50%;}方法二:制作两个扇形,定位到相应位置.
.corner-arc-bottom ,
.corner-arc-top{width: 100px;height: 100px;line-height: 100px;text-align: center;border: 0.3em solid white;border-radius: 0 100px 0 0 ;position: absolute;top:880px;left: -20px;}7 )最后由于半场是关于中线对称,我们可以做好左边,以中点(0,50%)旋转
.right {position: absolute;top: 0px;left: 50%;transform: rotateY(180deg);}大体思路就这些,下面是css代码和html:
/*中间注释部分为相对定位实现的,但是不能做到响应式*/
<style>body {margin: 100px;/* height: 100px; */display: flex;align-items: center;justify-content: center;/* 项目位于容器的中心*/background: radial-gradient(sandybrown, maroon);--line: 0.3em solid white;}.container {width: 120em;height: 80em;background-color: green;font-size: 5px;padding: 5em;}.container span {display: block;}.field {border: var(--line);position: relative;overflow: hidden;/*角球线隐藏*/width: inherit;height: inherit;z-index: 1;}.halfway-line {width: 60em;height: 80em;border-right: var(--line);}.centre-circle,.penalty-arc {width: 20em;height: 20em;border: var(--line);border-radius: 50%;position: absolute;top: 30em;}.centre-circle {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-mark {width: 2em;height: 2em;background-color: white;border-radius: 50%;position: absolute;top: calc(80em / 2 - 1em);left: calc(12em - 2em / 2);}.penalty-area {width: 18em;height: 44em;border: var(--line);position: absolute;top: calc((80em - 44em) / 2);left: -0.3em;background-color: green;}.penalty-arc {left: calc(12em - 20em / 2);z-index: -1;}.goal-area {width: 6em;height: 20em;border: var(--line);position: absolute;top: calc((80em - 20em) / 2);left: -0.3em;}.corner-arc{border:1px solid red;}.corner-arc::after,.corner-arc::before{content: '';position: absolute;width: 5em;height: 5em;border: 0.3em solid white;border-radius: 50%;left:calc(-5em / 2 - 0.3em);}.corner-arc::before {top:calc(-5em / 2 - 0.3em);}.corner-arc::after {bottom:calc(-5em / 2 - 0.3em);}/* .corner-arc-top {width: 100px;height: 100px;line-height: 100px;text-align: center;border: 0.3em solid white;border-radius: 0 0 100px 0;position: absolute;top: -5%;left:-5%;position: absolute;}.corner-arc-bottom {width: 100px;height: 100px;line-height: 100px;text-align: center;border: 0.3em solid white;border-radius: 0 100px 0 0;position: absolute;top: 880px;left: -20px;position: absolute;} */.right {position: absolute;top: 0px;left: 50%;transform: rotateY(180deg);}
</style>body部分
<body><div class="container"><div class="field"><div class="left"><span class="halfway-line"></span><span class="centre-circle"></span><span class="centre-mark"></span><span class="penalty-area"></span><span class="penalty-mark"></span><span class="penalty-arc"></span><span class="goal-area"></span><span class="corner-arc-top"></span><span class="corner-arc-bottom"></span></div><div class="right"><span class="halfway-line"></span><span class="centre-circle"></span><span class="centre-mark"></span><span class="penalty-area"></span><span class="penalty-mark"></span><span class="penalty-arc"></span><span class="goal-area"></span><span class="corner-arc-top"></span><span class="corner-arc-bottom"></span></div></div></div>
</body>border="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=29750517&auto=1&height=66">
纯CSS写个绿荫足球场,为世界杯喝彩相关推荐
- 纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
- android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- 纯css写的类似花纹图案的立体动态旋转
纯css写的类似花纹图案的立体动态旋转 动态中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&qu ...
- 纯css写出来的小彩虹
文章目录 下面是效果图 下面是源代码 学到的知识点 今天在CodePen上看见一个用纯css写出来的动画,所以就自己敲了一下 源代码链接 下面是效果图 下面是源代码 <head><m ...
- html中擦窗效果,纯CSS写的小雨打在窗户上效果
华灯初上,窗外的雨淅淅沥沥飘打在窗户的玻璃之上.站在室内的你,望着雨中的夜色,是不是让你增添几分惆帐.似乎如此的场景只有在诗中才会出现.那么今天我们一起来用CSS技术来描绘这样的一个场景. 这里仅是用 ...
- 纯css写滚动的弹幕特效
最近在写一个春节活动,里面有一个类似拼多多展示中奖用户的弹幕滚动. 后台给了随机滚动将近一百条数据,之前写过一版,是使用定位,将数据顶上去,但是一秒一动的效果略略有些卡顿.后来决定使用css动画来实现 ...
- css 画太阳,纯css写一个大太阳的天气图标
效果 效果图如下 实现思路div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来控 ...
- html div添加天气,web前端入门到实战：纯CSS写一个动态太阳的天气图标
效果 效果图如下 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来控制 ...
- HTML之CSS画三角形原理,纯CSS写三角形样式集合（原理解析）
一.实现原理 在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color: ...
最新文章
- Java入门教程五(数字和日期处理)
- IO多路转接模型----（select的模型，select的优缺点，poll的模型，poll的优缺点）
- 智慧新泰时空大数据与云平台_智慧警务大数据云平台开发情报研判系统解决方案...
- Ui设计中的动画如何应用，你知道吗？
- 利用脚本启动java程序
- 修改域的NetBIOS名称
- ENVI入门系列教程---一、数据预处理---8.图像裁剪
- .net面试中常被面试官问到的问题
- mysql添加值_怎么给mysql添加值？
- 迅为RK3399开发板嵌入式linux开发指南
- 工程与建设杂志工程与建设杂志社工程与建设编辑部2022年第3期目录
- Android UI 显示工具——HierarchyViewer工具
- 抖音网红追女生小程序代码
- 项目配置不当引发了数据泄露，人已裂开！！（建议收藏）
- cin、cout、cerr、clog用法区别及其在VS环境下的重定向
- python 函数报错TypeError: object of type 'int' has no len()
- Android面试 谈谈https原理
- 数据结构5 ：DataFrame（Pandas库）
- Winhex无法读取扇区，驱动器拒绝访问
- PyG基于Node2Vec实现节点分类及其可视化