CSS3篮球场热力区域图

最新推荐文章于 2022-10-11 15:58:16 发布

Andrew@csdn

最新推荐文章于 2022-10-11 15:58:16 发布

阅读量625

点赞数

分类专栏： dev css 笔记文章标签： css 篮球场

本文链接：https://blog.csdn.net/xzy565143480/article/details/97684565

版权

本文介绍如何利用CSS3纯手工制作篮球场热力区域图，从PS做草稿到编写CSS代码，详细阐述了制作过程，并提供已完成的示例挂在Codepen上供网友参考。

摘要由CSDN通过智能技术生成

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

文章目录

CSS3篮球场热力区域图纯手工生成
- 如何制作

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

如何制作

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=