效果图

wxml
bash
<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
css
.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
css
Page({
data: {
status:false
},
hover(){
var that = this
that.setData({ status:true })
setTimeout(() => { that.setData({ status:false }) },900)
},
})
遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。