效果圖

.wxml

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

.js

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

.wxss

.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)}
}