html
<view class="image">
<image src="a.png" mode="aspectFill"></image>
<view class="line"></view>
</view>
css
.image{
width: 400px;
height: 400px;
position: relative;
}
.image .line {
z-index: 8;
position: absolute;
top: 1px;
height: calc(100% - 2px);
width: 100%;
border-bottom: 3px solid #FFFFCC;
transform: translateY(-100%);
animation: radar-beam 2s infinite;
animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
animation-delay: 1.4s;
}
@keyframes radar-beam {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}