微信小程序中如何实现自定义波浪效果组件?
- 内容介绍
- 文章标签
- 相关推荐
本文共计875个文字,预计阅读时间需要4分钟。
最近看到很多app上都有波浪背景,有动态的,有静态的,这里是在小程序中用动态效果来实现的。先看看效果图:这里的文本是组件内部定义的。这是用两个svg图片通过css关键帧动画制作的效果。
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态。
先看看效果图:里面的文本是组件内部定义的。
这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件)
在小程序中使用,注意一个问题:就是svg不可以直接使用,需要转为base64(这个大家应该有收藏吧),这里我已经转换好了,在下面的wxss中。
这里顺便用一下自定义组件:
首先定义组件 wave
wave.wxml:这里我默认是用得显示个人信息。
本文共计875个文字,预计阅读时间需要4分钟。
最近看到很多app上都有波浪背景,有动态的,有静态的,这里是在小程序中用动态效果来实现的。先看看效果图:这里的文本是组件内部定义的。这是用两个svg图片通过css关键帧动画制作的效果。
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态。
先看看效果图:里面的文本是组件内部定义的。
这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件)
在小程序中使用,注意一个问题:就是svg不可以直接使用,需要转为base64(这个大家应该有收藏吧),这里我已经转换好了,在下面的wxss中。
这里顺便用一下自定义组件:
首先定义组件 wave
wave.wxml:这里我默认是用得显示个人信息。

