图资源

map.png

上

image.png

  • 根据图片大小来定.map盒子大小
  • .map 要居中显示
  • 图片是透明的，需要在定义body的背景颜色，颜色用#333吧
  • 在.map里弄个.city盒子，盒子内容先写个1
  • .city盒子用定位，再用chrome调试，把1定到北京，复制一下top，和right，替换代码里的top和right
  • 删掉1，在.city盒子里，写四个盒子，一个是中心点.dotted盒子，其他三个是pulse1，2,3盒子
  • .dotted设置宽高，并用border-radius变圆，再用chrome调试.city盒子，让圆点定到北京，复制替换掉代码里的
  • 用属性选择器.city div[class^=”pulse”]，宽高和.dotted一样就好，设置阴影box-shadow,用绝对定位加transform：translate（-50%,-50%)，定到圆点的中央
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  10.   <style>
  11.     body {
  12.       background-color: #333;
  13.     }
  15.     .map {
  16.       position: relative;
  17.       width: 747px;
  18.       height: 617px;
  19.       margin: auto;
  20.       background: url(media/map.png) no-repeat;
  21.     }
  23.     .city {
  24.       position: absolute;
  25.       top: 228px;
  26.       right: 192px;
  27.     }
  29.     .dotted {
  30.       width: 8px;
  31.       height: 8px;
  32.       background-color: #09f;
  33.       border-radius: 50%;
  34.     }
  36.     .city div[class^="pulse"] {
  37.       position: absolute;
  38.       top: 50%;
  39.       left: 50%;
  40.       transform: translate(-50%, -50%);
  41.       /* 以上是为了子在父中央 */
  42.       width: 8px;
  43.       height: 8px;
  44.       box-shadow: 0 0 12px #009dfd;
  45.       border-radius: 50%;
  46.     }
  47.   </style>
  48. </head>
  50. <body>
  51.   <div class="map">
  52.     <div class="city">
  53.       <div class="dotted"></div>
  54.       <div class="pulse1"></div>
  55.       <div class="pulse2"></div>
  56.       <div class="pulse3"></div>
  57.     </div>
  58.   </div>
  59. </body>
  61. </html>

下

image.png

  • 定义动画pulse，0%空，70%设置width，height，opacity为1,100%设置width，height，opacity为0.
  • 给.city div[class^=”pulse”] 用下动画 animation: pulse 1.8s linear infinite;
  • 一共用时1.8s,用速度曲线用 linear 匀速，infinite 无限，一直循环下去
  • 这样还不行，这样三个pulse都叠在一块了，得用延迟来把它们分开
  • .city div.pulse2 { animation-delay: .6s; } .city div.pulse3 { animation-delay: 1.2s; } 这里得注意权重的问题，权重比.city div[class^=”pulse”]小的话，就没用了。 ```html <!DOCTYPE html>

```