微信小步伐三种裁剪动画有效果图

效果图

.wxml

1. <image class="img inset {{status?'action1':''}}" src="{{src}}" />
2. <image class="img circle {{status?'action2':''}}" src="{{src}}" />
3. <image class="img polygon {{status?'action3':''}}" src="{{src}}" />
4. <button bind:tap="setClip">{{status?'正常':'裁剪'}}</button>

复制代码

.js

1. Page({
2.   data: {
3.     src:'https://c-ssl.dtstatic.com/uploads/blog/202302/17/20230217145103_a7fa7.thumb.1000_0.jpg',
4.     status:false
5.   },
6.   setClip(){
7.     this.setData({
8.       status:!this.data.status
9.     })
10.   },
11. })

复制代码

.wxss

1. page{
2.   text-align: center;
3. }
4. .img{
5.   width: 300rpx;
6.   height: 300rpx;
7.   margin: 50rpx 10rpx 0;
8.   transition: clip-path 0.5s;
9. }
10. /* 缩小 */
11. .inset{
12.   clip-path: inset(0);
13. }
14. .action1{
15.   clip-path: inset(50rpx 50rpx round 20rpx);
16. }
17. /* 圆 */
18. .circle{
19.   clip-path: circle(100%);
20. }
21. .action2{
22.   clip-path: circle(50%);
23. }
24. /* 多边形 */
25. .polygon{
26.   clip-path: polygon(100% 0px, 100% 100%, 0px 100%, 0px 0px);
27. }
28. .action3{
29.   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
30. }

复制代码

遇到问题可以看我主页加我Q，很少看博客，对你有资助别忘记点赞收藏。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。