大数据热点图案例（上） 💡

动画案例加强

我们学习的动画案例是热点图案例，常见于页面中。首先放置一张中国地图，利用定位将盒子定位到北京位置。然后实现类似波纹效果，通过放大三个圆圈并稍作时间间隔来实现。

页面布局

• 准备一个大的div，命名为dim map，放置背景图片并居中对齐。
• 背景图片大小为747x617，背景颜色设为#333。

定位盒子

• 创建一个盒子命名为city ct，绝对定位到北京位置。
• 调整top和right值，使其居中显示。

小圆点设计

• 创建一个小圆点dot，设置宽度和高度为8px，背景颜色为#09f。
• 添加border-radius属性，使其呈现圆角效果。

小圆圈设计

• 创建三个小圆圈，使用属性选择器统一样式。
• 设置宽度和高度为8px，不设背景颜色和边框。
• 使用阴影效果代替边框，使其呈现虚化感觉。

以上是案例的设计和实现过程，通过这些步骤可以完成热点图案例的制作。

---

---

大数据热点图案例（上） 💡

阴影效果调整

是不是就可以了啊 那水平不要给垂直 也不要给我 只给一个阴影 那12p x行了 给个颜色啊 这个呢是零零 然后呢是9d f d哎 这也是一种蓝色啊 好我给了这种颜色 那这时候呢它就有一个盒子阴影了 来看看什么样子了 打开完之后我们刷新一遍 走一个案例 发现诶就能看到了 这个阴影的效果是不是出来了

盒子叠加分析

但是我们知道应该是宽度是八 高度也是八啊 那为什么会这么大呢 可以分析分析啊 来我们检查一下 很 多东西呢你就分析分析就能得出结论来 首先第一个呢我们选了第一个孩子 都导体的 没问题 第二个pose啊 pose在这 那胖子呢就是原因非常简单 因为一个pose只有这么大 你下面呢有三个pose 三个pose呢属于块元素 它就叠在一起 所以你看到这么高 是三个div叠到了一起的效果 那其实我们知道按道理这三个应该干什么 摞在一起 是不是啊 它就压住这个小呃 蓝色这个点就可以了 然后呢在这个点基础上向四周发散 那也就告诉我们下面这三个是不是啊 那下面这三个pose呢 他们一定会干 什么哎用定位啊 而且是绝对定位 不占位置的好了 那么我们就开始写到这里面去 找到我们的三个pose 那么我们一看就知道他肯定要 position里面的absolute 绝对定位啊 考呀50%哎 然后呢left是多少呀 50% 是不是啊 我们不管父亲是多大 我们就保证我们这个几个小圆圈呢 在我整个父亲里面最中央显示 那么再来一个呢 就是我们的传丝 还记得我们讲的这个吗 transform里面的translate 那负的50% 逗号还有负的50% 那这样的话是不是保证我们这个盒子 我们这几个小波纹是 不是在我复合子里边水平居中 垂直居中啊 这个很重要啊 那么保证我们小波纹在复合字里面 水平垂直居中 这一定要写的 是不是啊 那你保证他水平居中 垂直居中之后呢 我们放大之后 放大之后唉 就会中心向四周发散啊 中心向 像四周发散哎 这么做才可以的啊 所以说呢这句话还是要写的 千万别忘了啊 这保证水平就是垂直居中好改完之后呢 我们再来看看效果 它有没有叠在一起啊 刷新一遍走一个 那你们会发现果然是按照我们想象中的 是这个样子 是不是确实在小圆尖的水平集中 垂直居中 这样我们发散它以中心点向四周发散 听明白了吗 一定要保证它这个样子才可以啊 因为我们是在水平在我们这合作最中央嘛 它在放大和缩小的时候呢 所以才会向四周发散 这个你要注意好了 那么改完之后呢 还有一个我们落下了什么呀 是不是它也是个圆的呀 ber刚好radios 要不然四方的就不好看了 也是50%好嘞 那这样你看我们大量的用到 我们前面刚讲过的c4 属性 所以说它在我们工作里面很常用 改完之后呢 其实我们再放大一下啊 现在是不是变成小圆点了 那这样的小圆点也比较好看 那这种做完之后呢 我们下一步是不是就可以开始添加动画了 哎那我们先讲到这里 简单总结一下刚才我给你布局的原理啊 首先呢第一个呢我们先有个大麦普大的div div里面就装了一张背景图片好了 这个背景图片有了之后呢 我们知道 这里面是不是要放这么一种小效果呀 所以说先有个复合子 势必都会有复合子 这个复合的我们叫city把它定位到这个位置 用定位就可以了 定过来 然后这个c里面包含了四个盒子 第一个呢叫dotted 就是那个蓝色的小圆点好 那再有一个呢它我写了三个波纹 哎你两个也行 但是三个我觉得会好看一些 那么我写了三个波纹 分别是pos 1 pos 2 pos 3 pos一个波纹的意思 那么这pose会怎么办呢 有一点很重要 一定要保证 我们这个小波纹放在复合子里面 水平居中 垂直居中 一会儿呢我们改变宽度高度的时候呢 它就会向四周放大 所以说这一个代码呢是非常重要的 给它写上去 其实我们也想一想 按道理这三个方案 三个波纹呢也是叠到一起的啊 好然后再一个呢那个波纹最好 最好看的一个效果呢不要给边框 而是给的是盒子阴影 因为呢你有了盒子阴影 然后呢我们看到这个边缘会虚一点 放大之后会更漂亮啊 那这是我们刚才讲的这个布局的方法