呼吸光环 #css #css效果

beacon.html

<div class="pulsating-beacon">
  <div class="beacon-static"></div>
  <div class="beacon-pulse"></div>
</div>

<style>
 .pulsating-beacon {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    opacity: 0;
    animation: fadein 3s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.beacon-static {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #7a8dfe;
    border-radius: 50px;
}

.beacon-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50px;
    background: rgba(122,141,254,.4);
    border: 1px solid #7a8dfe;
    -webkit-animation: onboard-hotspot-pulse 2s infinite;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 3s;
    -ms-animation: onboard-hotspot-pulse 2s infinite;
    -ms-animation-fill-mode: forwards;
    -ms-animation-delay: 3s;
    -o-animation: onboard-hotspot-pulse 2s infinite;
    -o-animation-fill-mode: forwards;
    -o-animation-delay: 3s;
    animation: onboard-hotspot-pulse 2s infinite;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

@keyframes fadein{0%{opacity:0}to{opacity:1}}
@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}

@keyframes onboard-hotspot-pulse{
  0{width:10px;height:10px}
  to{width:40px;height:40px;opacity:0}
}
@-webkit-keyframes onboard-hotspot-pulse{
  0{width:10px;height:10px}
  to{width:40px;height:40px;opacity:0}
}
</style>