大数据热点图（附效果图）

最新推荐文章于 2022-04-30 12:27:42 发布

七号男技师

最新推荐文章于 2022-04-30 12:27:42 发布

阅读量2.3k

点赞数 1

文章标签： css html css3 animation

本文链接：https://blog.csdn.net/weixin_47949485/article/details/107014784

版权

<!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>

在这里插入图片描述

七号男技师

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
大数据热点图（附效果图）

<!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;
复制链接

扫一扫