CSS3篮球场热力区域图纯手工生成

文章目录

CSS3篮球场热力区域图纯手工生成
- 如何制作
- - ps做草稿
  - css 敲代码
  - 在哪里可用

太不容易了，脑子都要炸了，如图所示，各个区域独立可点击，自己加代码就好，图给你们画好了

如何制作

ps做草稿

css 敲代码

直接上代码，不说了

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title>
</head><body><div id="basketball"><div id="area1"><div id="area1-1"></div><div id="area1-2"></div><div id="area1-3"></div><div id="area1-4"></div><div id="area1-5"></div><div id="area1-6"></div><div id="area1-7"></div></div><div id="area2"><div id="area2-1"></div></div><div id="area3"><div id="area3-1">3-1</div><div id="area3-2">3-2</div><div id="area3-3">3-3</div></div><div id="area4"><div id="area4-1">4-1</div><div id="area4-2">4-2</div><div id="area4-3">4-3</div></div></div>
</body></html>

#basketball {position: absolute;width: 800px;height: 600px;top: 0;left: 0;background-color: purple;
}#area1,
#area2,
#area3,
#area4 {display: flex;flex-direction: row;
}div[id="area1"] > div,
div[id="area2"] > div,
div[id="area3"] > div,
div[id="area4"] > div {//background-color: #ff0000;
}#area1-1 {height: 272px;width: 0px;border-left: 90px solid  red;border-bottom: 61px solid transparent;position: absolute;left: 0;top: 0;border-color: #red;z-index: 9;
}#area1-2 {height: 196px;width: 0px;border-left: 120px solid yellow;border-bottom: 76px solid transparent;position: absolute;left: 90px;top: 0;z-index: 9;
}#area1-3 {height: 133px;width: 0px;border-left: 101px solid blue;border-bottom: 63px solid transparent;position: absolute;left: 210px;top: 0px;z-index: 9;
}#area1-4 {width: 244px;height: 244px;border-radius: 100%;background-color: #fff;position: absolute;left: 278px;top: -72px;z-index: 8;
}
#area1-5 {height: 133px;width: 0px;border-right: 101px solid blue;border-bottom: 63px solid transparent;position: absolute;right: 210px;top: 0px;z-index: 9;
}#area1-6 {height: 196px;width: 0px;border-right: 120px solid yellow;border-bottom: 76px solid transparent;position: absolute;right: 90px;top: 0;z-index: 9;
}#area1-7 {height: 272px;width: 0px;border-right: 90px solid red;border-bottom: 61px solid transparent;position: absolute;right: 0;top: 0;z-index: 8;
}#area2-1{position: absolute;top:-181px;left:164px;border-right: 236px solid pink;border-left: 236px solid pink;border-top: 236px solid transparent;border-bottom: 236px solid pink;border-radius:100%;z-index: 7;
}#area3-1{top:-317px;left:28px;position: absolute;width: 744px;height: 744px;border-radius: 744px;background-color: lightgreen;clip: rect(0px,372px,744px,0px); transform: rotate(20deg);z-index: 6;
}
#area3-2{top:-317px;left:28px;position: absolute;width: 744px;height: 744px;border-radius: 744px;background-color: cyan;clip: rect(0px,372px,744px,0px); transform: rotate(-20deg);z-index: 5;
}
#area3-3{top:-317px;left:28px;position: absolute;width: 744px;height: 744px;border-radius: 744px;background-color: lightgreen;clip: rect(0px,372px,744px,0px); transform: rotate(-60deg);z-index: 4;
}#area4-1{top:-439.5px;left:-94.5px;position: absolute;width: 989px;height: 989px;border-radius: 100%;clip: rect(0px,494.5px,989px,0px); background-color: grey;overflow: hidden;transform: rotate(20deg);z-index: 3;
}#area4-2{top:-439.5px;left:-94.5px;position: absolute;width: 989px;height: 989px;border-radius: 100%;list-style: none;clip: rect(0px,494.5px,989px,0px); background-color: orange;overflow: hidden;transform: rotate(-20deg);z-index: 2;
}
#area4-3{top:-439.5px;left:-94.5px;position: absolute;width: 989px;height: 989px;border-radius: 100%;list-style: none;background-color: grey;overflow: hidden;transform: rotate(-40deg);z-index: 1;
}

写了一整天，终于过了，看来前端基本上没入门。。。。

在哪里可用

已经挂在codepen上，自取，送给网友了
Codepen-basketball shoot court

参考资料
如何使用css3绘制任意角度扇形+动画
html5 css3 如何绘制扇形任意角度

CSS3篮球场热力区域图相关推荐

html图片轮播怎么做的,CSS3制作轮播图的一种方法
轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种下面是style部分: 这几行都能明白吧 *{margin:0;padding:0;} a{text-decoration:n ...
【JFreeChart】JFreeChart—输出区域图
区域图(Area Chart)与折线图类似,但其强调数据之间的变化幅度,能够直观的现实变化的区域. 实现代码: AreaChartServlet.java package com.lmb.jfreec ...
css3轮播不用jpuery_js和CSS3 3D轮播图
这是一款js和CSS3 3D轮播图.这组3D轮播图中,共演示了6种轮播图效果.这些3D轮播图都是通过简单的JS代码配合CSS3来完成的. 使用方法 HTML结构以8张图片的3D轮播图为例,它的基本H ...
（39）css3实现轮播图效果
css3的轮播图和js的轮播图的区别? css3:没有一些js的逻辑,优点,过渡动画比较漂亮,缺点:兼容问题.无法实现自动轮播和点击轮播一起同时出现的效果. js轮播图:js逻辑很多,可以做的很复杂, ...
Oracle 20c 新特性：自动的区域图 - Automatic Zone Maps
导读:Zone Maps 是一个独立的访问结构,可以为表独立建立.在表和索引扫描期间,区块图可以根据表列上的谓词来修剪表的磁盘块和分区表的潜在完整分区.区块映射可以使用 Attribute Clust ...
python下绘制叠加区域图和叠加柱状图
数据: 叠加区域图代码: # KIRIN # 2021-1-5 # 18:41 # 叠加折线图 import pandas as pdimport matplotlib.pyplot as pltc ...
linux+qt4.8画波形图,Qt画笔实现波形区域图
参考文章:https://blog.csdn.net/yuxing55555/article/details/79752978 效果图: void WareArea::paintEvent(QPain ...
Tableau图表 | 3、区域图/面积图/折线图
面积图也叫作区域图,是一种折线图使用Tableau示例-超市数据简单折线图 1.订单日期拖拽到列, 将订单ID拖拽到行 2.右键订单日期-季度,右键订单ID-度量-计数标准面积图 1.将邮寄方式 ...
uniapp使用uCharts区域图
ucharts区域图的使用一.引入uCharts插件二.定义html模板和样式三.定义变量及宽高度四.调用接口获取数据五.ucharts图表数据渲染显示六.个人感悟一.引入uCharts ...

CSS3篮球场热力区域图

CSS3篮球场热力区域图纯手工生成

文章目录

如何制作

ps做草稿

css 敲代码

在哪里可用

CSS3篮球场热力区域图相关推荐

最新文章

热门文章

CSS3篮球场热力区域图

CSS3篮球场热力区域图 纯手工生成

文章目录

如何制作

ps做草稿

css 敲代码

在哪里可用

CSS3篮球场热力区域图相关推荐

最新文章

热门文章

CSS3篮球场热力区域图纯手工生成