微信小程序实现波浪动画效果 - 程序员阿鑫-带你一起秃头!

微信小程序实现波浪动画效果

作者: 程序员阿鑫

好兄弟,我们一起掉头发!

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

PS:波浪效果的素材来自小程序开源组件库ColorUI

我用了一个简单的方法,用动态图片实现,我看了网上很多用样式和js写的,感觉太复杂了,所以用了个图片

代码

wxml

<view class="header">
  <!-- 代码 -->
  <image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image>
</view>

wxss

.header {
  position: relative;
  height:300rpx;
  background: linear-gradient(to bottom, #56ccf2, #2f80ed);
}

.bg_ware {
  position: absolute;
  left: 0;
  bottom: -2rpx;
  width: 100%;
  mix-blend-mode: screen;
  height: 120rpx;
}

以上是《微信小程序实现波浪动画效果》的全部内容,

感谢您对程序员阿鑫博客的支持!

分享到:
打赏
未经允许不得转载:

作者: 程序员阿鑫, 转载或复制请以 超链接形式 并注明出处 程序员阿鑫-带你一起秃头!
原文地址: 《微信小程序实现波浪动画效果》 发布于2021-3-27

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

微信小程序实现波浪动画效果

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏