本文共 2339 字，大约阅读时间需要 7 分钟。

利用H5和C3制作热点图。

一、概念

3D动画

1.定义动画

@keyframes move{

开始状态

0%{ transform：translateX（0px） }

结束状态

100%{ transform：translateX（100px） }

}

2.使用动画

div{ 动画名字 animation-name：move； 持续时间 animation-duration：2s； }

3.常用属性

①动画名称（必须）animation-name

②持续时间（必须）animation-duration

③运动曲线（默认ease）animation-timing-function

④何时开始（默认0）animation-delay

⑤重复次数（默认0）animation-iteration-count

⑥是否逆向播放（默认normal）animation-direction；反方向选alternate

⑦动画结束后停止（默认backwards）animation-fill-mode；停下选forwards

⑧播放状态——这个写在:hover里。（默认running）animation-play-state；鼠标放在上面就会停止选paused

4.简写属性：

animation：动画名称 持续时间 运动曲线 何时开始 重复次数 是否逆向播放 动画结束播放状态

二、效果

三、思路

1. 先做一个盒子放置背景图片
2. 设置一个子盒子用于定位
3. 在子盒子里再设置四个盒子，一个设置圆，另外三个设置发散的波纹
4. 波纹用阴影制作会更有美感
5. 波纹放大用width和height设置，不要用scale，会把阴影也撑大，影响美感

四、实践

1. 先设置一个父盒子map，用背景方式放入地图

html

CSS

.map {    position: relative;    width: 1600px;    height: 1022px;    background: url(image/map.jpg) no-repeat;}

2. 设置子盒子.city，用于为后面的盒子定位（记得给父盒子设置相对定位，子绝父相）

html

CSS

.city {    position: absolute;    top: 226px;    left: 333px;}

3. 设置孙盒子.dotted，设置宽高、背景颜色，模拟城市圆点

html

CSS

.map .dotted {    width: 40px;    height: 40px;    border-radius: 50%;    background-color: purple;}

4. 利用宽高和不透明度设置发散的动画效果

CSS@keyframes plus {    0% {}    70% {        width: 90px;        height: 90px;        opacity: 1;    }    100% {        width: 110px;        height: 110px;        opacity: 0.4;    }}

5. 设置三个.plus盒子，设置宽高、阴影，引用动画效果，设置匀速、重复播放

html

CSS

.map div[class^="plus"] {    /* 1-4步是为了保证波纹在父盒子里水平垂直居中，放大后才能中心向四周发散 */    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    width: 40px;    height: 40px;    border-radius: 50%;    box-shadow: 0 0 12px purple;    animation: plus 2s linear infinite;}

*这里利用结构伪类选择器能更方便选取三个波纹盒子*

6. 设置延迟时间

CSS

.map .city .plus2 {    animation-delay: 0.6s;}.map .city .plus3 {    animation-delay: 1.2s;}

五、注意事项

1. 设置三个波纹盒子时，要记得为其赋予绝对定位，使得能够实现水平垂直居中。居中效果可利用2D效果——transform: translate(X, Y);实现。
2. 在设置波纹盒子的延迟时间时，注意优先级。

如果改为以下代码，则不会出现层次效果。

.plus2 {    animation-delay: 0.6s;} .plus3 {    animation-delay: 1.2s;}

原因是他们是类选择器，优先级为10；原来的如下所示，优先级为21，因此效果不会实现。

.map div[class^="plus"] {}

转载地址：https://blog.csdn.net/zx2014567296/article/details/116143491 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！