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

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

news 来源：原创 2025/8/21 1:33:30

效果图请添加图片描述

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

相关文章：

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

效果图 .wxml <view class"text" style"--deg:{{deg}}deg;"><view>混合父级颜色</view> </view> <view class"fill {{status?action:}}">文字颜色填充</view> <button bind:tap"setStatus"…...

编程日记 2025/8/21 1:33:30

山东大学软件学院创新项目实训开发日志（15）之中医知识问答历史对话查看bug处理后端信息响应成功但前端未获取到

在开发中医知识问答历史对话查看功能的时候&#xff0c;出现了前后端信息获取异同的问题&#xff0c;在经过非常非常非常艰难的查询之后终于解决了这一问题&#xff0c;而这一问题的罪魁祸首就是后端没有setter和getter方法&#xff01;&#xff01;&#xff01;&#xff01;&a…...

编程日记 2025/8/21 1:28:08

HttpSessionBindingListener 的用法笔记250417

HttpSessionBindingListener 的用法笔记250417 HttpSessionBindingListener 是 Java Servlet 规范中 唯一 由 被存储对象自身实现 的会话监听接口&#xff0c; 1. 核心功能 HttpSessionBindingListener 是一个由 会话属性对象自身实现 的接口&#xff0c;用于监听该对象被绑定…...

编程日记 2025/8/18 22:22:03

EuroCropsML：首个面向少样本时间序列作物分类的多国基准数据集

2025-04-15&#xff0c;由慕尼黑工业大学等机构创建的 EuroCropsML 数据集&#xff0c;这是一个结合了农民报告的作物数据与 Sentinel-2 卫星观测的时间序列数据集&#xff0c;覆盖了爱沙尼亚、拉脱维亚和葡萄牙。该数据集为解决遥感应用中作物类型数据空间不平衡问题提供了新的…...

编程日记 2025/8/17 4:01:33

《如何用 Function 实现动态配置驱动的处理器注册机制？》

大家好呀&#xff01;&#x1f44b; 今天我们来聊聊一个超实用的技术话题 - 如何用Java的Function接口实现动态配置驱动的处理器注册机制。听起来很高大上&#xff1f;别担心&#xff0c;我会用最简单的方式讲清楚&#xff01;&#x1f60a; 一、为什么要用Function实现处理器…...

编程日记 2025/8/21 1:30:38

PyTorch：学习 CIFAR-10 分类

&#x1f50d; 开始你的图像分类之旅&#xff1a;一步一步学习 CIFAR-10 分类 图像分类是计算机视觉中最基础的任务之一&#xff0c;如果你是初学者&#xff0c;那么以 CIFAR-10 为训练场是一个不错的选择。本文一步一步带你从零开始&#xff0c;学习如何用深度学习模型实现图…...

编程日记 2025/8/21 1:28:10

SpringBoot整合Thymeleaf模板：构建现代化Web视图层的完整指南

在Java Web开发领域&#xff0c;Thymeleaf作为一款自然模板引擎&#xff0c;凭借其优雅的语法和与Spring生态的无缝集成&#xff0c;已成为替代传统JSP的首选方案。本文将从技术整合、核心原理到生产实践&#xff0c;深度解析SpringBoot与Thymeleaf的协同工作方式。 一、Thymel…...

编程日记 2025/8/17 18:20:48

学习笔记十五——rust柯里化，看不懂 `fn add(x) -＞ impl Fn(y)` 的同学点进来！

&#x1f9e0; Rust 柯里化从零讲透&#xff1a;看不懂 fn add(x) -> impl Fn(y) 的同学点进来&#xff01; &#x1f354; 一、什么是柯里化&#xff1f;先用一个超好懂的生活比喻 假设你在点一个汉堡&#xff1a; 你说&#xff1a;我要点一个鸡腿汉堡&#xff01; 店员…...

编程日记 2025/8/21 1:27:22

软件安装包-yum

yum&#xff1a;软件管理的得力助手​ yum是一个软件下载安装管理的一个客户端&#xff0c;例如&#xff1a;小米应用商城、华为应用商城... Linux中软件包可能有依赖关系——yum会帮我们解决依赖关系的问题&#xff01; 1、软件包是什么&#xff1f; 在Linux下安装软件, 一个通…...

编程日记 2025/8/20 7:21:33

C++面试

C面试 c面试100题 1、封装多态继承 2、数据集合 3、 4、便于外部文件访问 5、只能通过对象访问 6、通过类名 7、构造函数、析构函数、拷贝构造函数、拷贝复制函数 8、将一个对象复制给新建的对象 9、没有返回值 10、类的对象中有指针&#xff0c;防止多个指针指向同…...

编程日记 2025/8/17 20:57:13

Java SpringBoot设置自定义web的图片本地路径

一&#xff0c;设置配置文件&#xff1a;application.properties my.config.image-pathD:\\Download\\images二&#xff0c;新增配置类&#xff1a;MyImagesConfig import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springfr…...

编程日记 2025/8/20 5:35:12

Python HTTP库——requests

文章目录 简介安装基本概念RESTfulAPIOAuth2.0Cookie和Session 初试GET请求POST请求PUT请求DELETE请求HEAD请求OPTIONS请求传递查询参数响应内容自定义响应头传递表单参数传递文件响应状态码响应头Cookies重定向和历史记录超时错误和异常Session对象请求和响应对象预处理请求SS…...

编程日记 2025/8/20 4:50:09

用idea配置springboot+mybatis连接postersql数据库

从socket开始&#xff0c;我们就要开始部署前后端的交互了&#xff0c;所以今天带来一份热度比较高的框架springboot&#xff0c;并教大家如何连接数据库。 框架 先给大家看一下目录结构&#xff0c;因为有些需要调用文件路径&#xff1a; 创建项目&#xff1a; 新版本可以…...

编程日记 2025/8/17 15:41:37

【补充篇】Davinci工具要求的dbc格式

1 简介 DBC文件是一种用于描述CAN（Controller Area Network，控制器局域网络）通信协议中报文和信号的格式化文件，其全称为“Database CAN”。DBC文件的核心作用是定义和解析CAN网络中的通信数据，包括节点、报文、信号及其属性等信息。 对于不同角色的工程师，DBC文件有着…...

编程日记 2025/8/20 5:43:32

IT资产管理(一)之GLPI安装及部署

一、GLPI 介绍 GLPI：Gestionnaire Libre de Parc Informatique 是一个免费的资产和 IT 管理软件包，提供 ITIL 服务台功能、许可证跟踪和软件审计。 GLPI 的主要功能： 服务资产和配置管理 （SACM）：管理您的 IT 资产和配置，跟踪计算机、外围设备、网络打印机及其相关组件…...

编程日记 2025/8/17 18:20:40

RPCRT4!OSF_CCALL::ActivateCall函数分析之RPCRT4!OSF_CCALL结构中的Bindings--RPC源代码分析

第一部分&#xff1a; 1: kd> t RPCRT4!OSF_CCALL::ActivateCall: 001b:77bf5789 55 push ebp 1: kd> kc # 00 RPCRT4!OSF_CCALL::ActivateCall 01 RPCRT4!OSF_CASSOCIATION::AllocateCCall 02 RPCRT4!OSF_BINDING_HANDLE::AllocateCCall 03 RPCRT4!OS…...

编程日记 2025/8/19 18:33:03

docker登录AWS ECR拉取镜像

1、配置AWS 登录key [rootip-172-31-13-6 ~]# aws configure AWS Access Key ID [None]: XXXXXXXXXXX AWS Secret Access Key [None]: %%YYYDSRGTHFGFSGRTHTHE$RHTSG Default region name [None]: ap-southeast-1 Default output format [None]: json2、登录AWS ECR镜像仓库 …...

编程日记 2025/8/17 18:20:51

IntelliJ IDEA download JDK

IntelliJ IDEA download JDK 自动下载各个版本JDK&#xff0c;步骤 File - Project Structure &#xff08;快捷键 Ctrl Shift Alt S&#xff09; 如果下载失败&#xff0c;换个下载站点吧。一般选择Oracle版本&#xff0c;因为java被Oracle收购了 好了。 花里胡哨&#…...

编程日记 2025/8/19 5:27:59

MQTT协议与HTTP协议的对比分析

以下是MQTT协议与HTTP协议的对比分析&#xff0c;从协议特性到应用场景的系统性对比&#xff1a; 一、协议层级与设计目标对比 维度MQTTHTTP协议层级应用层协议&#xff08;基于TCP/IP&#xff09;应用层协议&#xff08;基于TCP/IP&#xff09;核心设计目标机器间轻量级消息通…...

编程日记 2025/8/17 21:05:08

jenkins凭据管理（配置github密钥）

1.凭据管理 添加两种类型的凭据&#xff0c;Username with password和Secret text(填的token) Username with password是github登录的用户名和密码&#xff0c;Secret text填的github生成的token&#xff0c;权限的限制更细&#xff0c;安全性更高一些 Dashboard -> Manag…...

编程日记 2025/8/19 13:23:34

B端小程序如何突破常规，成为企业获客新利器？

数据驱动的用户旅程优化 在当今竞争激烈的市场环境中&#xff0c;了解并优化用户的交互路径对于吸引和保留客户至关重要。B端小程序可以通过收集用户行为数据来分析用户偏好和使用习惯。例如&#xff0c;应用热图分析工具可以直观展示用户点击最频繁的区域&#xff0c;帮助企业…...

编程日记 2025/8/20 20:57:52

25.4.17学习总结

关于bcrypt算法 BCrypt 的主要特点和优点&#xff1a; 加盐 (Salting): BCrypt 会自动为每个密码生成一个随机的盐值 (salt) 并将其与密码组合在一起&#xff0c;然后再进行哈希。 盐值是随机数据&#xff0c;用于防止彩虹表攻击。 这意味着即使两个用户使用相同的密码&#x…...

编程日记 2025/8/17 20:59:26

java 设计模式 策略模式

简介 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;旨在定义一系列算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换。策略模式让算法的变化独立于使用算法的客户端。换句话说&#xff0c;策略模式通过将不同的算法…...

编程日记 2025/8/17 19:45:54

游戏盾和高防ip有什么区别

游戏盾和高防IP都是针对网络攻击的防护方案&#xff0c;但​​核心目标、技术侧重点和应用场景存在显著差异​​。以下是两者的详细对比分析&#xff1a; ​​一、核心定位与目标​​ ​​维度​​​​高防IP​​​​游戏盾​​​​核心目标​​抵御大流量网络攻击&#xff08…...

编程日记 2025/8/20 8:19:43

关于 雷达（Radar） 的详细解析，涵盖其定义、工作原理、分类、关键技术、应用场景、挑战及未来趋势，结合实例帮助理解其核心概念

以下是关于 雷达&#xff08;Radar&#xff09; 的详细解析&#xff0c;涵盖其定义、工作原理、分类、关键技术、应用场景、挑战及未来趋势&#xff0c;结合实例帮助理解其核心概念&#xff1a; 一、雷达的定义与核心功能 1. 定义 雷达&#xff08;Radar&#xff0c;Radio D…...

编程日记 2025/8/17 6:15:36

机器学习 Day11 决策树

1.决策树简介 原理&#xff1a;思想源于程序设计的 if - else 条件分支结构 &#xff0c;是一种树形结构。内部节点表示属性判断&#xff0c;分支是判断结果输出&#xff0c;叶节点是分类结果 。案例&#xff1a;以母亲给女儿介绍男朋友为例。女儿依次询问年龄&#xff08;≤3…...

编程日记 2025/8/17 19:51:13

【HFP】深入解析蓝牙 HFP 协议中呼叫转移、呼叫建立及保持呼叫状态的机制

目录 一、核心指令概述 1.1 ATCMER&#xff1a;呼叫状态更新的 “总开关” 1.2 ATBIA&#xff1a;指示器的 “精准控制器” 1.3 指令对比 1.4 指令关系图示 二、CIEV 结果码&#xff1a;状态传递的 “信使” 2.1 工作机制 2.2 三类核心指示器 三、状态转移流程详解 3…...

编程日记 2025/8/20 22:30:04

音频识别优化（FFT）

整合多频段检测、动态阈值调整和持续时长验证的完整代码实现&#xff0c;包含详细注释&#xff1a; #include "esp_dsp.h" #include "driver/i2s.h" #include "esp_log.h" #include "math.h" static const char* TAG "ADV_FRE…...

编程日记 2025/8/17 21:19:01

【Redis】Redis基本命令（1）

KEYS 返回所有满足样式&#xff08;pattern&#xff09;的key。 KEY * 返回所有key&#xff0c;不简易使用 性能问题&#xff1a;当 Redis 存储百万级键时&#xff0c;会消耗大量 CPU 和内存资源&#xff0c;Redis 是单线程模型&#xff0c;KEYS * 执行期间会阻塞其他所有命令…...

编程日记 2025/8/20 18:09:42

IDEA2024 pom.xml依赖文件包报红解决

异常&#xff1a; 原因&#xff1a; 本地的Maven Repository库中不存在对应版本的dependency依赖&#xff0c;所以导致报红。 解决&#xff1a; 方法1&#xff1a;找到对应项目&#xff0c;右键Sync Project 就可以了 方法2&#xff1a;修改setting中maven的自动更新&#xf…...

编程日记 2025/8/17 18:20:54

Qt 信号与槽复习

Qt 信号与槽复习 Qt 信号与槽&#xff08;Signals and Slots&#xff09;机制是 Qt 框架的核心特性之一&#xff0c;用于实现对象之间的通信。它提供了一种松耦合的方式&#xff0c;使得组件可以独立开发和复用&#xff0c;广泛应用于 GUI 编程、事件处理和跨模块交互。本文将…...

编程日记 2025/8/20 9:19:55

RestControllerAdvice 和 ControllerAdvice 两个注解的区别与联系

它们都用于实现全局的通用处理逻辑&#xff0c;主要应用在以下三个方面&#xff1a; 全局异常处理: 使用 ExceptionHandler 注解的方法。全局数据绑定: 使用 InitBinder 注解的方法。全局数据预处理: 使用 ModelAttribute 注解的方法。 联系: 核心功能相同: 两者都提供了上述…...

编程日记 2025/8/20 23:05:44

最快打包WPF 应用程序

在 Visual Studio 中右键项目选择“发布”&#xff0c;目标选“文件夹”&#xff0c;模式选“自包含”&#xff0c;生成含 .exe 的文件夹&#xff0c;压缩后可直接发给别人或解压运行&#xff0c;无需安装任何东西。 最简单直接的新手做法&#xff1a; 用 Visual Studio 的“…...

编程日记 2025/8/17 12:00:12

Java NIO Java 虚拟线程（微线程）与 Go 协程的运行原理不同 为何Go 能在低配机器上承接10万 Websocket 协议连接

什么是Java NIO&#xff1f; Java NIO&#xff08;New Input/Output&#xff09; 是Java 1.4&#xff08;2002年&#xff09;引入的一种非阻塞、面向缓冲区的输入输出框架&#xff0c;旨在提升Java在高性能和高并发场景下的I/O处理能力。它相比传统的 Java IO&#xff08;java…...

编程日记 2025/8/17 20:55:09

C# 对列表中的元素的多个属性进行排序

目录 前言一、OrderBy、OrderByDescending、ThenBy、ThenByDescending二、Sort 前言 在开发过程中&#xff0c;我们经常需要 根据列表中的元素的某个属性进行排序&#xff0c;下面我们将简单介绍常用的排序函数。 例如此处有一个类&#xff0c;拥有的元素为编号和值 public …...

编程日记 2025/8/17 20:54:01

OpenCV颜色变换cvtColor

OpenCV计算机视觉开发实践&#xff1a;基于Qt C - 商品搜索 - 京东 颜色变换是imgproc模块中一个常用的功能。我们生活中看到的大多数彩色图片都是RGB类型的&#xff0c;但是在进行图像处理时需要用到灰度图、二值图、HSV&#xff08;六角锥体模型&#xff0c;这个模型中颜色的…...

编程日记 2025/8/20 21:34:47

java IO/NIO/AIO

(✪▽✪)曼波~~~~&#xff01;让曼波用最可爱的赛马娘方式给你讲解吧&#xff01;(⁄ ⁄•⁄ω⁄•⁄ ⁄) &#x1f3a0;曼波思维导图大冲刺&#xff08;先看框架再看细节哦&#xff09;&#xff1a; &#x1f4da; 解释 Java 中 IO、NIO、AIO 的区别和适用场景&#xff1a; …...

编程日记 2025/8/17 18:20:55

如何深入理解引用监视器,安全标识以及访问控制模型与资产安全之间的关系

一、核心概念总结 安全标识(策略决策的 “信息载体) 是主体&#xff08;如用户、进程&#xff09;和客体&#xff08;如文件、数据库、设备&#xff09;的安全属性&#xff0c;用于标记其安全等级、权限、访问能力或受保护级别&#xff0c;即用于标识其安全等级、权限范围或约束…...

编程日记 2025/8/19 19:18:48

宜搭与金蝶互通——连接器建立

一、 进入连接器工厂 图1 连接器入口 二、 新建连接器 图2 新建连接器第一步 1、 连接器显示名，如图2中①所示； 2、 图2中②域名，是金蝶系统API接口里面的“完整服务地址”com之前的信息，不含“https”,如图3中①所示； 3、 Base Url通常为“/”，如图2…...

编程日记 2025/8/20 14:09:31

中间件--ClickHouse-7--冷热数据分离，解决Mysql海量数据瓶颈

在web应用中&#xff0c;当数据量非常大时&#xff0c;即使MySQL的存储能够满足&#xff0c;但性能一般也会比较差。此时&#xff0c;可以考虑使用ClickHouse存储历史数据&#xff0c;在Mysql存储最近热点数据的方式&#xff0c;来优化和提升查询性能。ClickHouse的设计初衷就是…...

编程日记 2025/8/20 15:32:03

1.1 设置电脑开机自动用户登录exe开机自动启动

本文介绍两个事情&#xff1a; 1.Windows如何开机自动登录系统&#xff08;不用输密码) 2. 应用程序(.exe)如何开机自动启动 详细解释如下&#xff1a; 一、Windows如何开机自动登录系统&#xff08;不用输密码) 设备上的工控机&#xff0c;如果开机后都需要操作人员输入密码&…...

编程日记 2025/8/17 21:24:48

vscode stm32 variable uint32_t is not a type name 问题修复

问题 在使用vscodekeil开发stm32程序时&#xff0c;发现有时候vscode的自动补全功能失效&#xff0c;且problem窗口一直在报错。variable “uint32_t” is not a type name uint32_t 定义位置 uint32_t 实际是在D:/Keil_v5/ARM/ARMCC/include/stdint.h中定义的。将D:/Keil_v5…...

编程日记 2025/8/17 21:22:21

动态规划与记忆化搜索的区别与联系

记忆化搜索&#xff08;Memoization&#xff09;和动态规划&#xff08;Dynamic Programming, DP&#xff09;都是解决重叠子问题的高效算法技术&#xff0c;但它们有着不同的实现方式和特点。 1. 基本概念 记忆化搜索&#xff08;自顶向下&#xff09; 本质&#xff1a;带有…...

编程日记 2025/8/17 0:31:25

html+js+clickhouse环境搭建

实验背景&#xff1a; 我目前有一台服务器A&#xff0c;和一台主机B&#xff0c;两台设备属于同一局域网&#xff0c;相互之间可以通讯。服务器A中部署着clickhouse&#xff0c;我在主机B中想直接通过javascript代码访问服务器中的clickhouse数据库并获取数据。 ClickHouse 服务…...

编程日记 2025/8/17 18:21:07

生命护航行动再启航！

温州好人陈飞携防溺水课堂&#xff0c;为乡村少年宫筑起安全防线 图文作者&#xff1a;华夏之音/李望 随着夏日热浪的滚滚而来&#xff0c;楠溪江畔的安全警钟再次响起。在这片如诗如画的土地上&#xff0c;一场旨在保护青少年生命安全的防溺水课堂活动拉开了…...

编程日记 2025/8/19 22:24:04

Android Compose Activity 页面跳转动画详解

下面我将全面详细地介绍在 Compose 中实现 Activity 跳转动画的各种方法&#xff0c;包括基础实现、高级技巧和最佳实践。 一、基础 Activity 过渡动画 1. overridePendingTransition 传统方式 这是最基础且兼容性最好的方法&#xff0c;适用于所有 Android 版本。 实现步骤…...

编程日记 2025/8/17 20:53:46

Android启动初始化init.rc详解

1. Android启动与init.rc简介 1.1 Android启动过程 一张图简单阐述一下 &#xff08;网络图片&#xff0c;侵删&#xff09; 1.2 init.rc 简介 Linux的重要特征之一就是一切都是以文件的形式存在的&#xff0c;例如&#xff0c;一个设备通常与一个或多个设备文件对应。这些…...

编程日记 2025/8/18 23:55:16

Linux驱动开发-①regmap②IIO子系统

Linux驱动开发-IIO驱动 一&#xff0c;regmap二&#xff0c;IIO子系统2.1初始化相关工作2.2 通道2.3 读实现 over 一&#xff0c;regmap 对于spi和i2c,读写寄存器的框架不同&#xff0c;但设备本质一样&#xff0c;因此就有了regmap模型来对其进行简化&#xff0c;提供统一的接…...

编程日记 2025/8/20 2:25:38

HTML5好看的水果蔬菜在线商城网站源码系列模板5

文章目录 1.设计来源1.1 主界面1.2 关于我们1.3 商品服务1.4 果蔬展示1.5 联系我们1.6 商品具体信息1.7 登录注册 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#…...

编程日记 2025/8/19 9:39:15

L2-033 简单计算器满分笔记

本题要求你为初学数据结构的小伙伴设计一款简单的利用堆栈执行的计算器。如上图所示&#xff0c;计算器由两个堆栈组成&#xff0c;一个堆栈 S1​ 存放数字&#xff0c;另一个堆栈 S2​ 存放运算符。计算器的最下方有一个等号键&#xff0c;每次按下这个键&#xff0c;计算器就…...

编程日记 2025/8/17 18:20:52