<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>map</title> <style type="text/css"> body{ background: #513e57; } .div1{ height: 580px; width: 1200px; background: url(../../img/word_map-1.png); border: none; overflow: hidden; } .all{ position: absolute; left: 300px; top: 330px; } .div2{ height: 8px; width: 8px; background: yellow; border-radius: 50%; } .all div[class^=bo]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 8px; width: 8px; border-radius: 50%; box-shadow: 0 0 9px yellow; animation-name: botu; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } .bo4{ animation-delay: 0.4s; } .bo5{ animation-delay: 0.8s; } @keyframes botu { 0%{ } 70%{ width: 40px; height: 40px; opacity: 1; } 100%{ width: 70px; height: 70px; opacity: 0; } } .div1 a{ position: relative; top: 314px; left: 300px; color: #ffffff; font-family: 宋体; font-size: 12px; } h,m,f,p{ position: relative; color: #ffffff; font-family: 宋体; font-size: 12px; } h{ top: 240px; left: 720px; } m{ top:442px; left: 600px; } f{ top:211px; left: 800px; } p{ top: 486px; left: 930px; } .all2{ position: absolute; top: 257px; left: 748px; } .all3{ position: absolute; top: 458px; left: 657px; } .all4{ position: absolute; top: 227px; left: 885px; } .all5{ position: absolute; top: 531px; left: 930px; } .all2 div[class^=bo]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 8px; width: 8px; border-radius: 50%; box-shadow: 0 0 9px blue; animation-name: botu; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } .all2 .div2{ background: #009dfd; } .all3 div[class^=bo]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 8px; width: 8px; border-radius: 50%; box-shadow: 0 0 9px yellow; animation-name: botu; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } .all4 div[class^=bo]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 8px; width: 8px; border-radius: 50%; box-shadow: 0 0 9px yellow; animation-name: botu; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } .all5 div[class^=bo]{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 8px; width: 8px; border-radius: 50%; box-shadow: 0 0 12px red; animation-name: botu; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } .all5 .div2{ background: red; } </style></head><body><div class="div1"> <div class="all"> <div class="div2"></div> <div class="bo3"></div> <div class="bo4"></div> <div class="bo5"></div> </div> <div class="all2"> <div class="div2"></div> <div class="bo3"></div> <div class="bo4"></div> <div class="bo5"></div> </div> <div class="all3"> <div class="div2"></div> <div class="bo3"></div> <div class="bo4"></div> <div class="bo5"></div> </div> <div class="all4"> <div class="div2"></div> <div class="bo3"></div> <div class="bo4"></div> <div class="bo5"></div> </div> <div class="all5"> <div class="div2"></div> <div class="bo3"></div> <div class="bo4"></div> <div class="bo5"></div> </div> <a>广东</a> <h>北京</h> <m>贵州</m> <f>新疆</f> <p>台湾</p></div></body></html>