农户首页 - 贷款信息 - 农业金融平台

<div class='dragPay'>
        <div class='wave'>
            <span>贷款可用额度：</span><br>
            <span>{{ request.session.loanableAmount }}元</span>
        </div>
        <div class='waveMask'></div>
    </div>
<style>
.dragPay {
    width: 400px;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 10px;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
}
<p>.wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}</p>
<p>.wave span {
font-size: 24px;
color: #333;
}</p>
<p>.waveMask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
animation: waveMove 2s linear infinite;
}</p>
<p>@keyframes waveMove {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
</style></p>