网上找效果是这样 ,
https://file.zcool.cn/community/flash/11fdaf57764c5f0000018c1b5d5a4e.swf?Expires=1562819038&OSSAccessKeyId=lwQTEmwHzzSWSkqd&Signature=7v1SFd%2BJSRkWHReEcQ8pBXBWPYs%3D
以下是自己做的效果 和这个差不多
html
<div class="anmipic">
<div class="container">
<span></span>
<span></span>
</div>
<span class="span2"></span>
</div>
css
.anmipic{
width:1.3rem;
height:1.7rem;
position:absolute;
top:1.2rem;
right:1.2rem;
-webkit-animation: myMove 1s linear infinite;
display:none;
z-index:99;
}
.anmipic .container {
position: relative!important;
width: 1.3rem;
height: 1.3rem;
}
.anmipic .container span {
position: absolute;
width: 1.2rem;
height: 1.2rem;
left: 0;
bottom: 0;
background: #20A0FF;
border-radius: 50%;
-webkit-animation: living 1s linear infinite;
z-index: 1;
}
.anmipic .container span:nth-child(2) {
width: .9rem;
height: .9rem;
position:absolute;
left:15%;
top:19%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
-webkit-animation-delay: .1s;
}
.anmipic .span2{
width:1.15rem;
min-height:1.5rem;
display:inline-block;
background:url('/mobile/static/images/arrow1.png') no-repeat center top;
background-size:85%;
position:absolute;
top:.7rem;
left:.2rem;
z-index:2;
}
@keyframes living {
0%{
transform: scale(.3);
opacity: .7;
}
25%{
transform: scale(.5);
opacity: 0.7;
}
50%{
transform: scale(1);
opacity: 0.4;
}
100%{
transform: scale(1.5);
opacity: 0.1;
}
}
@keyframes myMove {
0% {
top: 1rem;
}
50% {
top: 1.2rem;
}
100% {
top: 1rem;
}
}