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

Tailwind CSS 实战：动画效果设计与实现

news 来源：原创 2025/5/11 4:41:45

在现代网页设计中,动画效果就像是一位优秀的舞者,通过流畅的动作为用户带来愉悦的视觉体验。记得在一个产品展示网站项目中,我们通过添加精心设计的动画效果,让用户的平均停留时间提升了 35%。今天,我想和大家分享如何使用 Tailwind CSS 打造优雅的动画效果。

设计理念

设计动画效果就像是在编排一场舞蹈表演。每个动画都应该像舞者的动作一样优雅自然,既要吸引眼球,又不能喧宾夺主。在开始编码之前,我们需要考虑以下几个关键点：

动画要流畅,避免生硬和突兀的效果
时机要恰当,在合适的时候触发动画
性能要出色,不能影响页面的整体表现
要考虑可访问性,为用户提供关闭动画的选项

基础动画效果

首先,让我们从一些常用的基础动画效果开始：

<!-- 淡入淡出效果 -->
<div class="transition-opacity duration-300 ease-in-out hover:opacity-0">淡入淡出
</div><!-- 缩放效果 -->
<div class="transition-transform duration-300 ease-in-out hover:scale-110">缩放效果
</div><!-- 旋转效果 -->
<div class="transition-transform duration-300 ease-in-out hover:rotate-180">旋转效果
</div><!-- 位移效果 -->
<div class="transition-transform duration-300 ease-in-out hover:translate-x-4">位移效果
</div><!-- 组合动画 -->
<div class="transition-all duration-300 ease-in-out hover:scale-110 hover:rotate-12 hover:translate-y-2">组合动画
</div>

高级动画效果

对于更复杂的动画需求,我们可以使用 CSS 动画：

<!-- 脉冲效果 -->
<style>
@keyframes pulse {0%, 100% {transform: scale(1);opacity: 1;}50% {transform: scale(1.1);opacity: 0.8;}
}.animate-pulse {animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style><div class="animate-pulse bg-blue-500 w-12 h-12 rounded-full">
</div><!-- 弹跳效果 -->
<style>
@keyframes bounce {0%, 100% {transform: translateY(0);animation-timing-function: cubic-bezier(0.8, 0, 1, 1);}50% {transform: translateY(-25%);animation-timing-function: cubic-bezier(0, 0, 0.2, 1);}
}.animate-bounce {animation: bounce 1s infinite;
}
</style><div class="animate-bounce bg-green-500 w-12 h-12 rounded-full">
</div><!-- 摇晃效果 -->
<style>
@keyframes shake {0%, 100% {transform: translateX(0);}25% {transform: translateX(-8px);}75% {transform: translateX(8px);}
}.animate-shake {animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
</style><div class="animate-shake bg-red-500 w-12 h-12 rounded-full">
</div>

交互动画

为交互元素添加动画可以提升用户体验：

<!-- 按钮点击效果 -->
<button class="transform active:scale-95 transition-transform duration-150 bg-blue-500 text-white px-6 py-2 rounded-lg">点击效果
</button><!-- 卡片悬浮效果 -->
<div class="transform hover:-translate-y-2 transition-transform duration-300 bg-white p-6 rounded-lg shadow-lg"><h3 class="text-lg font-semibold">卡片标题</h3><p class="mt-2 text-gray-600">卡片内容</p>
</div><!-- 菜单展开效果 -->
<div class="group relative"><button class="bg-gray-100 px-4 py-2 rounded-lg">展开菜单</button><div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:scale-100"><a href="#" class="block px-4 py-2 hover:bg-gray-100">菜单项 1</a><a href="#" class="block px-4 py-2 hover:bg-gray-100">菜单项 2</a><a href="#" class="block px-4 py-2 hover:bg-gray-100">菜单项 3</a></div>
</div>

页面切换动画

在页面切换时添加动画可以让过渡更加自然：

<!-- 页面切换容器 -->
<div class="relative overflow-hidden"><!-- 页面内容 --><div class="page-content transform transition-transform duration-500"><!-- 页面1 --><div class="absolute inset-0 transform translate-x-0">页面1内容</div><!-- 页面2 --><div class="absolute inset-0 transform translate-x-full">页面2内容</div></div>
</div><script>
// 页面切换逻辑
function switchPage(direction) {const content = document.querySelector('.page-content');const pages = content.children;const currentPage = Array.from(pages).find(page => !page.style.transform.includes('translate-x-full'));const nextPage = direction === 'next' ? currentPage.nextElementSibling : currentPage.previousElementSibling;if (nextPage) {// 当前页面滑出currentPage.style.transform = `translateX(${direction === 'next' ? '-100%' : '100%'})`;// 下一页面滑入nextPage.style.transform = 'translateX(0)';}
}
</script>

滚动动画

为滚动添加动画可以让页面更加生动：

<!-- 滚动渐入效果 -->
<style>
.fade-in-section {opacity: 0;transform: translateY(20vh);visibility: hidden;transition: opacity 1200ms ease-out, transform 600ms ease-out;will-change: opacity, visibility;
}.fade-in-section.is-visible {opacity: 1;transform: none;visibility: visible;
}
</style><div class="fade-in-section">滚动显示的内容
</div><script>
// 滚动监听
const observerOptions = {root: null,threshold: 0.1
};const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.classList.add('is-visible');}});
}, observerOptions);document.querySelectorAll('.fade-in-section').forEach(section => {observer.observe(section);
});
</script>

加载动画

在等待数据时显示加载动画可以提升用户体验：

<!-- 圆形加载动画 -->
<style>
@keyframes spin {to {transform: rotate(360deg);}
}.animate-spin {animation: spin 1s linear infinite;
}
</style><div class="relative"><div class="w-12 h-12 border-4 border-blue-200 rounded-full animate-spin"><div class="absolute top-0 left-0 w-12 h-12 border-4 border-blue-500 rounded-full border-t-transparent"></div></div>
</div><!-- 骨架屏动画 -->
<style>
@keyframes shimmer {100% {transform: translateX(100%);}
}.skeleton {position: relative;overflow: hidden;background: #f3f4f6;
}.skeleton::after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;transform: translateX(-100%);background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0,rgba(255, 255, 255, 0.2) 20%,rgba(255, 255, 255, 0.5) 60%,rgba(255, 255, 255, 0));animation: shimmer 2s infinite;content: '';
}
</style><div class="space-y-4"><div class="skeleton h-4 w-3/4 rounded"></div><div class="skeleton h-4 w-1/2 rounded"></div><div class="skeleton h-4 w-5/6 rounded"></div>
</div>

性能优化

为了确保动画效果的流畅性,我们需要注意以下几点：

// 使用 requestAnimationFrame
function animate(element, property, start, end, duration) {const startTime = performance.now();function update(currentTime) {const elapsed = currentTime - startTime;const progress = Math.min(elapsed / duration, 1);const current = start + (end - start) * progress;element.style[property] = current + 'px';if (progress < 1) {requestAnimationFrame(update);}}requestAnimationFrame(update);
}// 使用 transform 代替位置属性
const element = document.querySelector('.animated-element');
element.style.transform = 'translate3d(0, 0, 0)';// 使用 will-change 提示浏览器
element.style.willChange = 'transform';// 在动画结束后移除 will-change
element.addEventListener('transitionend', () => {element.style.willChange = 'auto';
});// 使用 CSS 变量控制动画
document.documentElement.style.setProperty('--animation-duration', '300ms');

可访问性支持

为了照顾所有用户,我们需要提供关闭动画的选项：

<!-- 减少动画选项 -->
<style>
@media (prefers-reduced-motion: reduce) {*,::before,::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}
}
</style><!-- 动画开关 -->
<div class="fixed bottom-4 right-4"><button id="toggle-animations"class="bg-white px-4 py-2 rounded-lg shadow-lg text-sm"aria-label="切换动画效果"><span class="animations-enabled">关闭动画</span><span class="animations-disabled hidden">开启动画</span></button>
</div><script>
const toggleButton = document.getElementById('toggle-animations');
const root = document.documentElement;toggleButton.addEventListener('click', () => {const isEnabled = !root.classList.contains('reduce-motion');root.classList.toggle('reduce-motion', isEnabled);document.querySelector('.animations-enabled').classList.toggle('hidden', isEnabled);document.querySelector('.animations-disabled').classList.toggle('hidden', !isEnabled);// 保存用户偏好localStorage.setItem('reduce-motion', isEnabled);
});// 检查用户偏好
if (localStorage.getItem('reduce-motion') === 'true') {root.classList.add('reduce-motion');document.querySelector('.animations-enabled').classList.add('hidden');document.querySelector('.animations-disabled').classList.remove('hidden');
}
</script>

写在最后

通过这篇文章,我们详细探讨了如何使用 Tailwind CSS 构建优雅的动画效果。从基础动画到复杂交互,从性能优化到可访问性支持,我们不仅关注了视觉效果,更注重了用户体验和技术实现。

记住,一个优秀的动画效果就像一位优秀的舞者,需要在适当的时机展现优雅的动作。在实际开发中,我们要始终以用户体验为中心,在视觉效果和性能之间找到最佳平衡点。

如果觉得这篇文章对你有帮助,别忘了点个赞 👍

Tailwind CSS 实战：动画效果设计与实现

在现代网页设计中,动画效果就像是一位优秀的舞者,通过流畅的动作为用户带来愉悦的视觉体验。记得在一个产品展示网站项目中,我们通过添加精心设计的动画效果,让用户的平均停留时间提升了 35%。今天,我想和大家分享如何使用 Tailwind CSS 打造优雅的动画效果。设计理念设计动…...

编程日记 2025/5/11 4:41:45

在K8S中，Pod请求另一个Pod偶尔出现超时或延迟，如何排查？

在Kubernetes中，当Pod请求另一个Pod时偶尔出现超时或延迟，可能是由于多种原因造成的。以下是一些建立的排查步骤： 1. 检查网络配置和插件： 确认你的kubernetes集群使用了合适的网络插件（如Calico、Flannel等&#xf…...

编程日记 2025/4/21 6:54:03

C# 设计模式（结构型模式）：外观模式

C# 设计模式（结构型模式）：外观模式 (Facade Pattern) 在复杂系统中，往往会涉及到多个子系统、模块和类。这些子系统的接口和功能可能会让使用者感到困惑和复杂。在这种情况下，我们可以使用外观模式（Facade…...

编程日记 2025/5/11 4:27:19

LLM - 使用 LLaMA-Factory 部署大模型 HTTP 多模态服务教程 (4)

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/144881432 大模型的 HTTP 服务，通过网络接口，提供 AI 模型功能的服务，允许通过发送 HTTP 请求，交互大模型，通常基于云计算架构，无需在本地部署复杂的模型和硬件，…...

编程日记 2025/5/10 5:24:46

MCGS学习记录

软件包用户窗口主窗口元件：工具箱->输入框上面数据对象在工作台的实时数据库可以新增数据对象理解为中间变量，控件改变其值，控件监测其值做出变化基本属性设定变量名和初始值指针化？ 变化时自动保存初始值&#x…...

编程日记 2025/5/6 17:53:07

Swift Protocols（协议）、Extensions（扩展）、Error Handling（错误处理）、Generics（泛型）

最近在学习 Swift，总结相关知识 1. Protocols（协议） 1.1 协议的定义和实现协议（protocol） 是一种定义方法和属性的蓝图，任何类、结构体或枚举都可以遵循协议。遵循协议后，需要实现协议中定义…...

编程日记 2025/5/11 4:18:58

axios和fetch的实现原理以及区别，与XMLHttpRequest的关系，并结合react封装统一请求示例

Axios 和 Fetch 对比及统一请求封装 1. Axios 基础用法 1.1 安装和引入 // 安装 npm install axios// 引入 import axios from axios;1.2 基本请求方法 // GET 请求 axios.get(/api/users).then(response > console.log(response.data)).catch(error > console.error…...

编程日记 2025/5/10 6:26:58

2024年阅读书单

《高效能人士的7个习惯》史蒂芬.柯维精进《高效能人士的7个习惯》在读了一遍之后，记住非常深刻的就是积极主动和以终为始。《软件架构》 Simon Brown 架构、技术《软件架构》这本书比较抽象，若是工作时间比较少的人来读，可能觉得作者没写…...

编程日记 2025/5/11 4:35:06

Eclipse 内容辅助

Eclipse的内容辅助（Content Assist）功能是一项核心特性，它通过提供代码提示和自动完成建议来提高开发效率。这个功能能够在用户编写代码时自动显示可能的代码补全选项，如变量名、方法名、类名和关键字等。它还能根据用户的输入和上…...

编程日记 2025/5/11 4:01:54

【数学建模笔记】评价模型-基于熵权法的TOPSIS模型

视频课地址：https://www.bilibili.com/video/BV1eRyVYUEhg 本系列文章和课程一样，只使用Python实现，好久没玩数学建模了国赛中不能再用TOPSIS，可以做辅助算法。 1. 算法原理熵权TOPSIS方法是一种结合熵权法和TOPSIS的决策分析…...

编程日记 2025/5/11 3:47:17

小程序发版后，强制更新为最新版本

为什么要强制更新为最新版本？ 在小程序的开发和运营过程中，强制用户更新到最新版本是一项重要的策略，能够有效提升用户体验并保障系统的稳定性与安全性。以下是一些主要原因： 1. 功能兼容新功能或服务通常需要最新版本的支持&…...

编程日记 2025/5/10 23:37:09

数据分析思维（七）：分析方法——群组分析方法

数据分析并非只是简单的数据分析工具三板斧——Excel、SQL、Python，更重要的是数据分析思维。没有数据分析思维和业务知识，就算拿到一堆数据，也不知道如何下手。推荐书本《数据分析思维——分析方法和业务知识》，本文内容就是提取…...

编程日记 2025/5/11 4:26:15

SAP 01-初识AMDP(ABAP-Managed Database Procedure)

1. 什么是AMDP(ABAP-Managed Database Procedure) 1.）AMDP - ABAP管理数据库程序，是一种程序，我们可以使用SQLSCRIPT在AMDP内部编写代码，SQLSCRIPT是一种与SQL脚本相同的数据库语言，这种语言易于理解和编码。将AM…...

编程日记 2025/5/11 0:09:38

.net core 线程锁，互斥锁，自旋锁，混合锁

线程锁、互斥锁、自旋锁和混合锁是多线程编程中的重要概念，它们用于控制对共享资源的访问，避免数据竞争和不一致性。每种锁有其特定的适用场景和特点。我们来逐一解释它们，并进行比较。 1. 线程锁（Thread Lock） 线程…...

编程日记 2025/5/6 6:18:03

大数据系列之：深入理解学习使用腾讯COS和COS Ranger权限体系解决方案，从hdfs同步数据到cos

大数据系列之：深入理解学习使用腾讯COS和COS Ranger权限体系解决方案，从hdfs同步数据到cos 对象存储COS对象存储基本概念COS Ranger权限体系解决方案部署组件COS Ranger Plugin部署COS-Ranger-Service部署COS Ranger Client部署 COSN 从hdfs同步数据到co…...

编程日记 2025/5/10 23:27:57

Uniapp Android 本地离线打包（详细流程）

一、简介 App 离线 SDK 暂时不支持 Kotlin，未来不清楚。 uniapp 提供了云打包与本地打包两种方案，云打包需要排队且还有次数限制，本地打包则就没有这些限制，而且会本地打包对开发原生插件有很大的帮助。细节&#x…...

编程日记 2025/5/9 21:17:15

单片机常用外设开发流程(1)（IMX6ULL为例）

1.通过GPIO引脚控制led灯和key按钮 （1）设置多路复用的引脚（SW_MUX_CTL）也可以说是选择让引脚以哪种工作模式工作 （2）设置电器属性（SW_PAD_CTL）上拉、等等... (3)设置GPIO的方向&am…...

编程日记 2025/5/11 3:44:10

机器学习学习知识点

机器学习学习知识点什么是消融实验（Ablation experiment）？num_step与batch_size的区别python glob.glob()函数认识python的条件判断之is not、is not None、is Nonetqdm介绍及常用方法softmax 激活函数。type_as(tesnor)Python OpenCV cv2.…...

编程日记 2025/5/11 3:59:35

深入了解PINN：物理信息神经网络（Physics-Informed Neural Networks）

1. 什么是PINN（物理信息神经网络）？ 物理信息神经网络（PINN，Physics-Informed Neural Networks）是一类通过结合神经网络和物理方程的深度学习方法。其主要特点是将物理系统的约束条件（如偏微分方…...

编程日记 2025/5/11 4:03:05

人工智能知识分享第八天-机器学习_泰坦尼克生存预估线性回归和决策树回归对比案例

泰坦尼克生存预估案例 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.tree import DecisionTreeClassifier from sklearn.metrics import classification_report import matplotlib.pyplot as plt from sklearn.tree import plot_t…...

编程日记 2025/5/1 9:48:09

封装/前线修饰符/Idea项目结构/package/impore

目录 1. 封装的情景引入 2. 封装的体现 3. 权限修饰符 4. Idea 项目结构 5. package 关键字 6. import 关键字 7. 练习程序设计：高内聚，低耦合； 高内聚：将类的内部操作“隐藏”起来，不需要外界干涉&#xff1b…...

编程日记 2025/5/11 2:00:55

python中的装饰器

装饰器（Decorator）是 Python 中的一种语法糖，它允许你修改或增强函数或类的行为。下面详细解释： 基本概念装饰器本质上是一个函数，它接受一个函数作为参数，并返回一个新的函数： def my_decor…...

编程日记 2025/5/4 17:34:42

HTMLElement、customElements及元素拓展

文章目录 HTMLElement 与 customElementscustomElements.define() 方法说明HTML 元素方法拓展 HTMLElement 与 customElements HTMLElement 概述 HTMLElement是一个接口，它表示所有HTML元素。几乎所有的HTML标签（如<div>、<p>、<a>等…...

编程日记 2025/4/28 8:18:33

字玩FontPlayer开发笔记3 性能优化大量canvas渲染卡顿问题

字玩FontPlayer开发笔记3 性能优化大量canvas渲染卡顿问题字玩FontPlayer是笔者开源的一款字体设计工具，使用Vue3 ElementUI开发，源代码： github: https://github.com/HiToysMaker/fontplayer gitee: https://gitee.com/toysmaker/fontpl…...

编程日记 2025/5/6 17:53:02

PyTorch 中 coalesce() 函数详解与应用示例

PyTorch 中 coalesce() 函数详解与应用示例 coalesce： 美 [ˌkoʊəˈlɛs] 合并；凝聚；联结，注意发音引言在 PyTorch 中，稀疏张量（Sparse Tensor）是一种高效存储和操作稀疏数据的方式。稀疏…...

编程日记 2025/5/9 5:57:54

计算机网络（第8版）第3章课后习题--透明传输

【3-11】试分别讨论以下各种情况在什么条件下是透明传输，在什么条件下不是透明传输。(提示：请弄清什么是“透明传输”,然后考虑能否满足其条件。) (1)普通的电话通信。 (2)互联网提供的电子邮件服务。解答 ： 透明传输是指在数据传输…...

编程日记 2025/5/11 4:37:48

JavaScript 日期格式

在 JavaScript 中，日期格式可以通过 Date 对象进行操作和格式化。下面是一些常见的 JavaScript 日期格式及其示例： 1. ISO 8601 格式 ISO 8601 是一种标准的日期和时间表示方法，格式为 YYYY-MM-DDTHH:mm:ss.sssZ，例如： let date = new Date(); console.log(date.toISOS…...

编程日记 2025/5/6 8:53:12

云打印之拼多多打印组件交互协议

拼多多打印组件交互协议相关介绍如下： 1、打印组件下载地址 http://meta.pinduoduo.com/api/one/app/v1/lateststable?appIdcom.xunmeng.pddprint&platformwindows&subTypemain 2、socket连接端口如果是http的话，端口是5000 socket new …...

编程日记 2025/5/7 8:54:31

Oracle数据库如何找到 Top Hard Parsing SQL 语句？

有一个数据库应用程序存在过多的解析问题，因此需要找到产生大量硬解析的主要语句。什么是硬解析 Oracle数据库中的硬解析（Hard Parse）是指在执行SQL语句时，数据库需要重新解析该SQL语句，并创建新的执行计划的过程。这…...

编程日记 2025/5/7 10:35:42

浅谈棋牌游戏开发流程二：后端技术选型与基础环境搭建

一、前言：客户端只是台前，后端才是幕后“指挥中心” 在上一篇“客户端技术”中，我们聊到玩家看到的一切动作、动画、界面逻辑，都靠客户端去渲染和交互。但若没有后端的支撑，玩家点了“出牌”可能就像一拳打在空气里—…...

编程日记 2025/5/7 23:49:54

使用qiankun搭建微前端应用及踩坑

线上演示地址：React App 源码地址：https://github.com/Jiang-K-J/micro-app?tabreadme-ov-file （帮忙点个小星星） 主应用：react 18 子应用：vite vue3 子应用：react 18 安装主应用 $ y…...

编程日记 2025/5/7 5:39:33

Windows 环境配置 HTTPS 服务实战

一、环境准备 win10以上操作系统安装 Certbot申请阿里云\腾讯云域名安装 nginx 1.3以上版本二、Certbot 安装及 SSL 证书生成 Certbot 是一个免费、开源工具，用于自动化在Web服务器上获取和更新SSL/TLS证书。它可以通过Let’s Encrypt服务获取免费的SSL/TLS证书…...

编程日记 2025/5/3 19:55:56

小程序租赁系统开发的优势与应用前景分析

内容概要小程序租赁系统是一种新兴的数字化解决方案，旨在为用户提供更加便捷与高效的租赁服务。它通常包括一系列功能，如在线浏览、即时预定、支付功能以及用户反馈机制。这些系统在使用上极为友好，让用户能够轻松选择所需的商品或服务&…...

编程日记 2025/5/8 13:56:38

Redis（基础篇 + 实践篇）

01 | 基本架构：一个键值数据库包含什么？ Redis 作为一个内存数据存储系统，它的架构设计非常简洁，但功能非常强大。理解其核心架构对高效使用 Redis 至关重要。客户端与服务器架构： 客户端通过 TCP 协议连接到 Redis …...

编程日记 2025/5/10 20:17:44

单片机-独立按键矩阵按键实验

1、按键介绍按键管脚两端距离长的表示默认是导通状态，距离短的默认是断开状态， 如果按键按下，初始导通状态变为断开，初始断开状态变为导通我们开发板是采用软件消抖，一般来说一个简单的按键消抖就是先读取按键的状…...

编程日记 2025/5/5 20:21:29

我用AI学Android Jetpack Compose之入门篇（1）

这篇我们先来跑通第一个Android Jetpack Compose工程，现在新版本的Android Studio，新建工程选择Empty Activity默认就会开启Jetpack Compose的支持，再次声明，答案来自通义千问Ai 文章目录 1.用Android Jetpack Compose需要安装什…...

编程日记 2025/5/7 0:32:21

简单的生产数据库重连策略优化

简单的druid生产数据库重连策略优化 1. 需求我们生产环境有一次在大量请求拥堵后，好多数据库操作都超时了，在此之后数据库的连接池不能正常的获取数据库连接了，我们确认了数据库服务是没有问题的，那么就是连接池的配置有问题&a…...

编程日记 2025/5/9 6:12:03

STM32-笔记37-吸烟室管控系统项目

一、项目需求 1. 使用 mq-2 获取环境烟雾值，并显示在 LCD1602 上； 2. 按键修改阈值，并显示在 LCD1602 上； 3. 烟雾值超过阈值时，蜂鸣器长响，风扇打开；烟雾值小于阈值时，蜂鸣器不响…...

编程日记 2025/5/10 0:17:06

2025-01-04 Unity插件 YodaSheet1 —— 插件介绍

文章目录 1 介绍2 工作原理2.1 ScriptableObject -> YadeSheetData2.2 YadeDatabase 存储多个 YadeSheetData 3 用途4 缺点5 推荐 1 介绍 Yade 提供类似于 Excel 或者 Google Sheets 的表格编辑器，可以轻松地在 Unity 编辑器中编辑，搜索&#xf…...

编程日记 2025/5/8 2:26:13

电子电气架构 --- 安全相关内容汇总

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…...

编程日记 2025/5/7 13:55:14

科研绘图系列：R语言单细胞数据常见的可视化图形

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍加载R包数据下载导入数据数据预处理图1图2图3图4图5图6系统信息参考介绍单细胞数据常见的可视化图形因为本教程是单细胞数据，因此运行本画图脚本需要电脑的内存最少32Gb 加载…...

编程日记 2025/5/1 13:22:16

【顶刊TPAMI 2025】多头编码（MHE）之极限分类 Part 2：基础知识

目录 1 预热1.1 记号1.2 分类器计算过载问题 2 多头编码（MHE）2.1 标签分解2.2 多头组合（Multi-Head Combination） 论文：Multi-Head Encoding for Extreme Label Classification 作者：Daojun Liang, Haixia …...

编程日记 2025/5/10 13:01:27

Flink使用

Window下启动支持下载或复制老版本的放在bin目录下即可； flink.bat echo off setlocalSET bin%~dp0 SET FLINK_HOME%bin%.. SET FLINK_LIB_DIR%FLINK_HOME%\lib SET FLINK_PLUGINS_DIR%FLINK_HOME%\pluginsSET JVM_ARGS-Xmx512mSET FLINK_JM_CLASSPATH%FLINK_LI…...

编程日记 2025/5/7 13:35:02

一种可复用的AI提效方案：AI点灯

在当今飞速发展的时代，AI技术正不断渗透到我们生活的各个层面，深刻改变着传统的工作方式和生活模式。面对这一重大变革，我们不能被动观望或抗拒，而应积极拥抱AI，将其作为成长的助力。只有与AI协同发展，才能…...

编程日记 2025/5/1 5:36:14

Django 模型

Django 模型 Django 模型是 Django 框架的核心组件之一，它用于定义应用程序的数据结构。在 Django 中，模型是 Python 类，通常继承自 django.db.models.Model。每个模型类代表数据库中的一个表，模型类的属性对应表中的字段。 1. 创建模型创建 Django 模型非常简单。首先…...

编程日记 2025/5/4 13:59:18