一. 效果
二. 代码
<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>