微信小程序水波纹动画效果

水波波动效果实现，复制查看效果

wxml

<view class="circle"><view class="positionNumber"><view>60%</view><view>匹配指数</view></view><view class="wave"></view>
</view>

wxss

.positionNumber{position: absolute;top: 30rpx;left: 0;right: 0;margin: auto;z-index: 9;text-align: center;}.positionNumber>view:nth-child(1){font-size: 30rpx;font-weight: bold;color: #555FF2;}.positionNumber>view:nth-child(2){font-size: 17rpx;color: #999;
}
.circle {width: 153rpx;height: 153rpx;background-color:  #7591AD;border-radius: 50%;position: relative;z-index: 9;}.wave {position: relative;width: 100%;height: 100%;background: linear-gradient(225deg, #8D93F7, #D4D6FC);border-radius: 50%;box-shadow: inset 0 0 50px #8D93F7;overflow: hidden;z-index: 0;}.wave::before, .wave::after {position: absolute;content: "";width: 200%;height: 200%;top: 0;left: 50%;transform: translate(-50%, -50%);}.wave::before {border-radius: 30%;background: linear-gradient(225deg, #8D93F7, #D4D6FC);animation: animate 5s linear infinite;}.wave::after {border-radius: 40%;background: #fff;animation: animate 5s linear infinite;}@keyframes animate{0%{top:-50rpx;transform: translate(-50%, -50%) rotate(0deg);}100%{top:-50rpx;transform: translate(-50%, -50%) rotate(360deg);}}

微信小程序水波纹动画效果相关推荐

[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 本文共有两个示例,先上图示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({container ...
微信小程序学习做动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 微信扫码学习,在线指导微信小程序动画效果的实现
微信小程序实现旋转动画效果
问题在小程序中,如果可以用一个动画效果展现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字效果,更是突出这段文字的一个方法.那么接下来就来看一下如何实现一个文字旋转的动画效果吧 ...
微信小程序实现波浪动画效果
目录注效果图代码 .wxml .wxss 素材注波浪效果的素材来自小程序开源组件库ColorUI 效果图代码 .wxml <view class="header" ...
mpvue微信小程序动画_微信小程序MPvue实现动画效果
export default { data() { return { animation1: {}, animation2: {}, animation3: {}, stretch: false, / ...
微信小程序签到弹窗(动画效果)
效果图如下所示图片素材:https://pan.baidu.com/s/1FGT8XANYO5PbzjE_QPfJ3w 提取码: kgv6 .wxml <button bindtap=&quo ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...

微信小程序水波纹动画效果

微信小程序水波纹动画效果相关推荐

最新文章

热门文章