效果图
wxml
<view class="{{status?'active':''}}"><view class="up-top btn"><text>向上</text></view><view class="up-left btn"><text>向左</text></view><view class="up-center btn"><text>居中</text></view>
</view>
<button bind:tap="hover">开始</button>
wxss
.btn{margin:50rpx auto;width: 350rpx;height: var(--h);text-align: center;font-size: 32rpx;line-height: var(--h);--h:80rpx;--b:#0066FF;
}
.active{--p:100%;--s:.3s;--c:65%;color: #fff;
}
.up-top{background:conic-gradient(var(--b) 0 0) calc(200% - var(--p, 0%)) 100% / 200% var(--p, 4rpx) no-repeat;transition:.3s var(--s, 0s), background-position .3s calc(.3s - var(--s, 0s));
}
.up-left{background:conic-gradient(var(--b) 0 0) var(--p, 0%) / var(--p, 0%) no-repeat;transition:.3s, background-position 0s;
}
.up-center{background:conic-gradient(from -135deg at 100% 50%, var(--b) 90deg, transparent 0) 0 var(--p, 0%),conic-gradient(from -135deg at var(--h) 50%, transparent 90deg, var(--b) 0) 100% var(--p, 0%);background-size: var(--c, 0) 200%;background-repeat: no-repeat;transition:.3s ease-in, background-position 0s;
}
js
Page({data: {status:false},hover(){var that = thisthat.setData({ status:true })setTimeout(() => { that.setData({ status:false }) },900)},
})
遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。
