一、需求说明
实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ;
核心 是实现 向四周 发散 的 波纹动画 ;
二、动画代码分析
1、地图背景设置
地图背景设置 :
地图 是...x 617 像素 ; 同时设置 地图 背景图片 , 并设置 水平居中 ;
.map {
/* 盒子模型的宽高 就是 背景图片的宽高 */...*/
margin: 0 auto;
}
该地图是 半透明 白色背景 , 需要设置一个 暗色 的整体背景 , 才能看出来 , 这里将页面设置成 #333 颜色的...color: white;
}
下面通过 F12 调试的方式 , 将 city 盒子 , 使用 绝对定位 定位到 地图图片 中的 北京 位置 ;
调试 界面中...一次可以增减 10 像素 ;
鼠标滚轮 一次可以增减 1 像素 ;
Alt+ 鼠标滚轮 一次可以增减 0.1 像素 ;
最终得到 , 将 city 布局设置到 北京 位置 , top 属性值为 220