微信小步伐三种裁剪动画有效果图
效果图https://i-blog.csdnimg.cn/direct/4fe2cc9ecc4844f781d70de12060de25.gif
.wxml
<image class="img inset {{status?'action1':''}}" src="{{src}}" />
<image class="img circle {{status?'action2':''}}" src="{{src}}" />
<image class="img polygon {{status?'action3':''}}" src="{{src}}" />
<button bind:tap="setClip">{{status?'正常':'裁剪'}}</button>
.js
Page({
data: {
src:'https://c-ssl.dtstatic.com/uploads/blog/202302/17/20230217145103_a7fa7.thumb.1000_0.jpg',
status:false
},
setClip(){
this.setData({
status:!this.data.status
})
},
})
.wxss
page{
text-align: center;
}
.img{
width: 300rpx;
height: 300rpx;
margin: 50rpx 10rpx 0;
transition: clip-path 0.5s;
}
/* 缩小 */
.inset{
clip-path: inset(0);
}
.action1{
clip-path: inset(50rpx 50rpx round 20rpx);
}
/* 圆 */
.circle{
clip-path: circle(100%);
}
.action2{
clip-path: circle(50%);
}
/* 多边形 */
.polygon{
clip-path: polygon(100% 0px, 100% 100%, 0px 100%, 0px 0px);
}
.action3{
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
遇到问题可以看我主页加我Q，很少看博客，对你有资助别忘记点赞收藏。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]