:after{
content: "";
animation: pulse-border-2 2s ease-out infinite;
top: 36px;
left: 50%;
background: #fff;
width: 100%;
border-radius: 36px;
}
@keyframes pulse-border-2{
0%{transform:translate(-50%,-50%) translateZ(0) scale(1);opacity:.7}
100%{transform:translate(-50%,-50%) translateZ(0) scale(1.35);opacity:.1}
}
下面提供全部代码(上面是转载,下面是我自己的代码)
.btn-play {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
border: none;
outline: none !important;
padding: 18px 20px 20px 28px;
background: #FFFFFF;
}
.btn-play:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
background: #FFFFFF;
border-radius: 100%;
animation: pulse-border 1500ms ease-out infinite;
}
.btn-play:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
background: #FFFFFF;
border-radius: 100%;
transition: all 200ms;
}
.btn-play span {
z-index: 3;
width: 0;
height: 0;
border-left: 16px solid #E47A2E;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
}
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
opacity: 0;
}
}
.playIcon{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="btn-play playIcon" >
<span></span>
</div>