微信小程序文字混合、填充动画有效果图

复制代码

<view class="text" style="--deg:{{deg}}deg;">
  <view>混合父级颜色</view>
</view>
<view class="fill {{status?'action':''}}">文字颜色填充</view>
<button bind:tap="setStatus">{{status?'暂停':'开始'}}</button>

复制代码

Page({
  data: {
    status:false,
    deg:0
  },
  setStatus(){
    var that = this
    const status = !that.data.status
    if(status){
      that.data.time = setInterval(function() {
        var deg = that.data.deg
        that.setData({
          deg:deg > 350?10:deg+10
        })
      },100)
    }else{
      clearInterval(that.data.time)
    }
    that.setData({
      status
    })
  },
})

复制代码

.text{
  padding:50rpx 0;
  background: linear-gradient(var(--deg), #000 50% , #fff 50%);
}
.text>view{
  /* 元素的混合模式
  multiply   相乘：元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗；
  overlay    叠加：根据背景颜色对内容进行倍增或屏蔽，这与硬光混合模式相反；
  screen     屏幕：将背景和内容相乘，然后补充结果。这将导致内容比背景颜色更亮；
  difference 差值：这将从最亮的颜色中减去两种颜色中较深的一种；
  color      颜色混合：根据内容的色调和饱和度以及背景的亮度创建颜色；
  */
  mix-blend-mode: difference;
  text-align: center;
  color: #fff;
}

.fill{
  width: fit-content;
  margin: 50rpx auto;
  background:linear-gradient(135deg, #e54d42 10% , #f37b1d 20%, #fbbd08 30%, #8dc63f 40%, #39b54a 50%,
  #1cbbb4 60%, #0081ff 70%, #6739b6 80%, #9c26b0 90%, #e03997 100%);
  font-weight:700;
  /* 文字颜色填充 */
  -webkit-text-fill-color: transparent;
  /* 背景绘制区域 */
  -webkit-background-clip:text;
}
.fill.action{
  animation: filter infinite 3s;
}
/* 颜色旋转 */
@keyframes filter{
  from {
    filter:hue-rotate(360deg)
  }
  to {
    filter:hue-rotate(0deg)
  }
}

微信小程序文字混合、填充动画有效果图

效果图

.wxml

.js

.wxss