微信小程序:水波纹扩散特效,头像实践

  |   0 评论   |   0 浏览

上图看效果:预览有些掉帧是因为录制Gif压缩了,实际上很流畅的。

2323.gif

其实效果很简单:

大家应该都见过安卓手机上经常有扩散的水波纹特效,而且前端UI库也有很多,但是它们都是背景颜色扩散,不是这种线条波纹,怎么处理的呢,其实就是使用多个叠加的元素附加在指定目标上,叠加的元素需要是绝对定位,然后设置动画:随着时间修改padding大小,这个叠加的元素是有border的,这样border就被扩展开了,如何多个依次呢?让多个叠加的元素动画错开一点就好了。

看看代码,为了简单示例:我用了两个伪元素:after,before

<view  class="usermotto pulse ">

<open-data  type="userAvatarUrl"></open-data>

</view>


下面是CSS

  

.usermotto  {

height:  150rpx;

/* background: #b6b6b6; */

border:  1px  solid #b6b6b67c;

border-radius:  160rpx;

width:  150rpx;

margin:  20%  auto;

overflow:  hidden;

}
.pulse::before  {

content:  '';

display:  block;

position:  absolute;

width:  150rpx;

box-sizing:  border-box;

height:  100%;

top:  0;

left:calc(50%  -  75rpx);

border:  inherit;

border-radius:  inherit;

transition:  opacity  0.3s,  transform  0.3s,  -webkit-transform  0.3s;

-webkit-animation:  pulse-animation  1s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

animation:  pulse-animation  2s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

z-index:  -1;

}

.pulse::after  {

content:  '';

display:  block;

position:  absolute;

width:  150rpx;

box-sizing:  border-box;

height:  100%;

top:  0;

left:calc(50%  -  75rpx);

border:  inherit;

border-radius:  inherit;

transition:  opacity  0.4s,  transform  0.4s,  -webkit-transform  0.4s;

-webkit-animation:  pulse-animation  1.5s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

animation:  pulse-animation  1.5s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

z-index:  -1;

}

  

@keyframes  pulse-animation  {

0%  {

opacity:  1;

padding:  10rpx;

transform:  scale(1);

-webkit-transform:  scale(1)

}

  

80%  {

opacity:  0;

padding:  40rpx;

transform:  scale(1.8);

-webkit-transform:  scale(1.8)

}

  

100%  {

opacity:  0;

padding:  60rpx;

transform:  scale(2);

-webkit-transform:  scale(2)

}

}


标题:微信小程序:水波纹扩散特效,头像实践
作者:yf_d
地址:看看我的CSDN