Question

我想创建一个CSS脉动动画效果（圆形），以覆盖Image Map Area Circle的确切位置。我能够独立于包含图像贴图的Main Div创建和定位CSS脉冲效果，但无法将Pulsating CSS Circle效果完全绑定在图像贴图区域的圆上。

我也正在考虑将此解决方案实现为响应式解决方案。

找到一个解决方案非常好。

/* CSS */

.pulsating-circle {
  position: absolute;
  left: 48%;
  top: 26%;
  /* padding:60% 10%; */
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 30px;
  height: 30px;
}

.pulsating-circle:before {
  content: '';
  position: relative;
  display: block;
  width: 300%;
  height: 300%;
  box-sizing: border-box;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 45px;
  background-color: #01a4e9;
  -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.pulsating-circle:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: lightgoldenrodyellow;
  border-radius: 15px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@-webkit-keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes pulse-ring {
  0% {
    -webkit-transform: scale(0.33);
    transform: scale(0.33);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

@keyframes pulse-dot {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}

.container {
  width: 100%;
  height: auto;
}

<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />




</head>

<body>
  <div class="container">
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img src="https://i.stack.imgur.com/JRYcu.png" width="700px" height="467px" style="align-self: center;" usemap="#image-map">

    <map name="image-map" id="image-map">
                        <area data-nbmembre="1" target="" alt="Preview Visor" title="Preview Visor" group="rectangle"  href="#" coords="552,263,631,230" shape="rect" data-maphilight='{"strokeColor":"FF0000","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'>
                        <area class="pulse-animation" data-nbmembre="2" target="" alt="BT Connect" title="BT Connect" group="circle" href="#" coords="641,191,27" shape="circle" data-maphilight='{"strokeColor":"FF0000","strokeWidth":5,"fillColor":"ffffff","fillOpacity":0.5}'>
                    </map>
  </div>
  <div class="pulsating-circle"></div>

</body>

</html>

在图像地图区域圆上放置CSS脉动圆

0 个答案: