动画-热点图eg

 效果:

 代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .big {
        position: relative;
        width: 500px;
        height: 500px;
        background: url(data:image/jpeg;base64,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)
          no-repeat center;
        background-size: contain;
        margin: 0 auto;
      }
      .pointer {
        position: absolute;
        top: 200px;
        right: 245px;
        color: #d10d0d;
      }
      .two {
        top: 350px;
        right: 167px;
      }
      .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
      }
      /* 选择三个波纹:class前有 “pulse” */
      .pointer div[class^="pulse"] {
        /* 三个波纹中心重合 */
        position: absolute;
        top: 50%;
        left: 50%;
        /* 移动自身的50%,translate(,)中间有逗号!! */
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px 0 #009dfe;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
      }
      .pointer div.pulse2 {
        animation-delay: 0.4s;
      }
      .pointer div.pulse3 {
        animation-delay: 0.8s;
      }
      /* 规定动画 */
      @keyframes pulse {
        0% {
        }
        70% {
          /* 阴影也会一起放大,效果不好 */
          /* transform: scale(3); */
          width: 40px;
          height: 40px;
          /* 透明度 */
          opacity: 1;
        }
        100% {
          width: 40px;
          height: 40px;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="big">
      <div class="pointer">
        <!-- 中心点 -->
        <div class="dotted"></div>
        <!-- 波纹 -->
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
      </div>
      <!-- 第二个动画效果 -->
      <div class="pointer two">
        <!-- 中心点 -->
        <div class="dotted"></div>
        <!-- 波纹 -->
        <div class="pulse1"></div>
        <div class="pulse2"></div>
        <div class="pulse3"></div>
      </div>
    </div>
  </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值