一. 效果
二. 代码
<div class="feature"><div class="feature-box"><div class="pulse"></div><div class="pulse1"></div><div class="pulse2"></div></div></div>
<style>.feature {width: 100%;height: 800px;display: flex;align-items: center;justify-content: center;}.feature-box {width: 140px;height: 140px;margin-top: -30%;position: relative;z-index: 2;}.pulse {width: 140px;height: 140px;background: #4892FB;border-radius: 50%;}.pulse1, .pulse2 {position: absolute;width: 180px;height: 180px;left: 50%;top: -20px;margin-left: -90px;background: #4892FB;border-radius: 50%;opacity: 0;z-index: -1;box-shadow: 1px 1px 15px #3399ff;}.pulse1 {animation: warn1 1.5s linear;animation-iteration-count: infinite;}.pulse2 {animation: warn2 1.5s linear;animation-iteration-count: infinite;}@keyframes warn1 {0% {transform: scale(1);opacity: 0.01;}25% {transform: scale(1.2);opacity: 0.1;}50% {transform: scale(1.4);opacity: 0.07;}75% {transform: scale(1.6);opacity: 0.03;}100% {transform: scale(1.8);opacity: 0.01;}}@keyframes warn2 {0% {transform: scale(0.8);opacity: 0.01;}25% {transform: scale(0.8);opacity: 0.13;}50% {transform: scale(1);opacity: 0.1;}75% {transform: scale(1.2);opacity: 0.07;}100% {transform: scale(1.4);opacity: 0.01;}}</style>
