当前位置：首页 > news >正文

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

news 来源：原创 2025/5/15 8:41:46

效果图

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