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

CSS动画

news 来源：原创 2025/7/20 22:52:47

一、核心概念与语法

1. @keyframes 关键帧

2. animation 属性

二、动画调速函数（animation-timing-function）

1. 预设值

2. 贝塞尔曲线

3. 步进函数（steps()）

三、动画控制与交互

1. 暂停与恢复

2. JavaScript 控制

3.逐帧动画与精灵图

四、性能优化

五、实际应用示例

1. 淡入淡出效果

2. 旋转加载图标

3. 弹跳效果

六、兼容性与前缀

示例：走马灯

示例：全民出游季

CSS 动画允许通过定义关键帧（@keyframes）和动画属性（animation）实现复杂的动态效果，相比 transition 更灵活，支持多阶段控制和循环播放。

一、核心概念与语法

在 CSS 中，以 @ 开头的语法称为 At-Rules（规则声明），用于定义 CSS 的元数据、条件逻辑、外部资源引入等高级功能。

1. `@keyframes` 关键帧

作用：定义动画的中间状态。

语法：

@keyframes 动画名称 {from { /* 初始状态 */ }to { /* 结束状态 */ }/* 或使用百分比 */0% { ... }50% { ... }100% { ... }
}

示例：

@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}@keyframes slideAndRotate {0% { transform: translateX(0) rotate(0); }50% { transform: translateX(200px) rotate(180deg); }100% { transform: translateX(0) rotate(360deg); }
}

2. `animation` 属性

作用：将关键帧动画应用到元素。

子属性：

属性	作用	常用值
`animation-name`	指定关键帧名称	`fadeIn`, `slideAndRotate`
`animation-duration`	动画持续时间	`2s`, `500ms`
`animation-timing-function`	速度曲线	`ease`（默认）, `linear`, `ease-in-out`, `cubic-bezier(0.4, 0, 0.2, 1)`
`animation-delay`	动画延迟时间	`1s`, `0.5s`
`animation-iteration-count`	播放次数	`1`（默认）, `infinite`, `3`
`animation-direction`	播放方向	`normal`（默认正向）, `reverse`（反向）, `alternate`（正反交替）
`animation-fill-mode`	动画结束后的样式保留	`none`（默认）, `forwards`（保持最后一帧）, `backwards`（应用第一帧）
`animation-play-state`	控制播放状态	`running`（默认）, `paused`（暂停）

简写语法：

.element {animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

示例：

.box {animation: fadeIn 2s ease-in-out 1s infinite alternate forwards;
}

二、动画调速函数（`animation-timing-function`）

1. 预设值

ease：默认缓入缓出（先加速后减速）。
linear：匀速。
ease-in：缓入（逐渐加速）。
ease-out：缓出（逐渐减速）。
ease-in-out：缓入缓出。

2. 贝塞尔曲线

使用 cubic-bezier(x1, y1, x2, y2) 自定义速度曲线。

.box {animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

3. 步进函数（`steps()`）

将动画拆分为固定步数播放，适合帧动画。

.box {animation-timing-function: steps(5, jump-start); /* 分 5 步跳跃播放 */
}

三、动画控制与交互

1. 暂停与恢复

通过 animation-play-state 控制：

.box:hover {animation-play-state: paused; /* 悬停时暂停动画 */
}

2. JavaScript 控制

动态添加/移除动画类：

const box = document.querySelector('.box');
box.classList.add('fadeIn');  // 触发动画
box.style.animation = 'none'; // 停止动画

3.逐帧动画与精灵图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>.box {margin: 100px auto;width: 1000px;}.people {width: 140px;height: 140px;background-image: url(./res/run.png);animation: run 1s steps(12) infinite,move 4s linear infinite;}@keyframes run {from {background-position: 0 0;}to {background-position: -1680px 0;}}@keyframes move {0% {transform: translate(0) scaleX(1);}50% {transform: translate(800px) scaleX(1);}50.1% {transform: translate(800px) scaleX(-1);}100% {transform: translate(0) scaleX(-1);}}</style>
</head>
<body><div class="box"><div class="people"></div></div></body>
</html>

四、性能优化

优先使用 transform 和 opacity
- 这些属性由 GPU 加速，避免触发重排（如 width、margin）。
减少动画数量
- 同时运行过多动画可能导致页面卡顿。

使用 will-change 提示浏览器

.box {will-change: transform, opacity; /* 提前告知浏览器可能变化的属性 */
}

五、实际应用示例

1. 淡入淡出效果

@keyframes fadeInOut {0%, 100% { opacity: 0; }50% { opacity: 1; }
}.element {animation: fadeInOut 3s ease-in-out infinite;
}

2. 旋转加载图标

@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}.loader {animation: spin 1s linear infinite;
}

3. 弹跳效果

@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-30px); }
}.button {animation: bounce 1s ease-in-out infinite;
}

六、兼容性与前缀

现代浏览器：无需前缀（Chrome 43+、Firefox 16+、Safari 9+）。

旧版浏览器：需添加 -webkit- 前缀：

@-webkit-keyframes fadeIn { ... }
.box {-webkit-animation: fadeIn 2s;
}

示例：走马灯

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;color: #fff;}.box {margin: 100px auto;width: 300px;height: 50px;overflow: hidden;}.box ul {display: flex;animation: move 7s linear infinite;}.box:hover ul {animation-play-state: paused;}@keyframes move {from {transform: translateX(0);}to {transform: translateX(-700px);}}.box img {width: 100px;}</style>
</head>
<body><div class="box"><ul><li><img src="./res/1.jpg" alt=""></li><li><img src="./res/2.jpg" alt=""></li><li><img src="./res/3.jpg" alt=""></li><li><img src="./res/4.jpg" alt=""></li><li><img src="./res/5.jpg" alt=""></li><li><img src="./res/6.jpg" alt=""></li><li><img src="./res/7.jpg" alt=""></li><!-- 填补显示区域的空白 --><li><img src="./res/1.jpg" alt=""></li><li><img src="./res/2.jpg" alt=""></li><li><img src="./res/3.jpg" alt=""></li></ul></div></body>
</html>

示例：全民出游季

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><link rel="stylesheet" href="./iconfont/iconfont.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;color: #fff;}html {height: 100%;   }body {height: 100%;background: url(./res/images/f1_1.jpg) no-repeat center 0 / cover;   }.cover {width: 100%;height: 100%;   position: relative;}.cover div {position: absolute;}.title {top: 50%;left: 50%;transform: translate(-50%,-50%);animation: show 1s;}@keyframes show {0% {transform: translate(-50%,-50%) scale(1);}20% {transform: translate(-50%,-50%) scale(0.3);}50% {transform: translate(-50%,-50%) scale(1.7);}80% {transform: translate(-50%,-50%) scale(0.8);}100% {transform: translate(-50%,-50%) scale(1);}}.label {bottom: 10%;left: 50%;transform: translate(-50%);}.label ul {display: flex;justify-content: space-between;}.label ul img {width: 100px;margin: 0 85px;animation: bounce .8s ease-in infinite alternate;}.label ul li:nth-child(2) img {animation: bounce .8s 0.3s ease-in infinite alternate;}.label ul li:nth-child(3) img {animation: bounce .8s 0.6s ease-in infinite alternate;}.label ul li:nth-child(4) img {animation: bounce .8s 0.9s ease-in infinite alternate;}@keyframes bounce {from {transform: translateY(0);}to {transform: translateY(30px);}}.cloud {position: relative;left: 50%;}.cloud img:nth-child(1) {top: 20px;margin-left: -200px;}.cloud img:nth-child(2) {top: 100px;margin-left: 400px;}.cloud img:nth-child(3) {top: 180px;margin-left: -500px;}.cloud img {position: absolute;animation: move 2s linear infinite alternate;}@keyframes move {to {transform: translate(-50px);}}.lu {top: 15%;left: 60%;}.san {top: 15%;left: 25%;animation: float 1.5s linear infinite alternate;}@keyframes float {to {transform: translateY(50px);}}</style>
</head>
<body><div class="cover"><div class="cloud"><img src="./res/images/yun1.png" alt=""><img src="./res/images/yun2.png" alt=""><img src="./res/images/yun3.png" alt=""></div>    <div class="lu"><img src="./res/images/lu.png" alt=""></div>    <div class="san"><img src="./res/images/san.png" alt=""></div><div class="label"><ul><li><img src="./res/images/1.png" alt=""></li><li><img src="./res/images/2.png" alt=""></li><li><img src="./res/images/3.png" alt=""></li><li><img src="./res/images/4.png" alt=""></li></ul></div><div class="title"><img src="./res/images/font1.png" alt=""></div></div></body>
</html>

CSS动画

目录一、核心概念与语法 1. keyframes 关键帧 2. animation 属性二、动画调速函数（animation-timing-function） 1. 预设值 2. 贝塞尔曲线 3. 步进函数（steps()） 三、动画控制与交互 1. 暂停与恢复 2. JavaScript 控制…...

编程日记 2025/7/20 22:52:47

计算机视觉（CV）技术的优势和挑战

计算机视觉（CV）技术是人工智能领域中的一个重要分支，它主要通过让机器学会“看”和“理解”图像或视频来模拟人类视觉系统。以下是计算机视觉技术的一些优势和挑战： 优势： 自动化：计算机视觉技术可以实现…...

编程日记 2025/7/20 22:41:10

动态IP与静态IP该如何选？

一、当IP地址成为"网络身份" 2023年亚马逊封号潮中，某杭州卖家因登录IP频繁切换（早8点在纽约，午间瞬移到东京），触发平台风控导致账号冻结。这类"时空错乱症"揭示了跨境电商的生存法则&#xff1a…...

编程日记 2025/7/20 22:45:39

Vue.js 完全指南：从入门到精通

1. Vue.js 简介 1.1 什么是 Vue.js？ Vue.js（通常简称为 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。所谓"渐进式"，意味着 Vue 的设计是由浅入深的，你可以根据自己的需求选择使用它的一部分或全部功能。 Vue 最初由尤雨溪（Evan You）在 2014 年创…...

编程日记 2025/7/20 22:50:07

《TypeScript 7天速成系列》第3天：TypeScript高级类型通关秘籍：泛型+联合+交叉类型实战

TypeScript 的类型系统是其最强大的特性之一，但也是许多开发者感到困惑的地方。今天我们就来破解 TypeScript 中最难的类型系统，掌握泛型、联合类型和交叉类型的使用技巧。一、泛型函数与泛型接口泛型是 TypeScript 中创建可重用组件的重要工具&…...

编程日记 2025/7/20 22:39:08

Python----数据分析（足球运动员数据分析）

一、数据展示 1.1、数据 1.2、列名字段名备注Name姓名Nationality国籍National_Position国家队位置National_Kit国家队号码Club所在俱乐部Club_Position所在俱乐部位置Club_Kit俱乐部号码Club_Joining加入俱乐部时间Contract_Expiry合同到期时间Rating评分Height身高Weight体…...

编程日记 2025/7/20 22:48:58

音视频三看书的笔记 MediaPlayer的C/S架构

MediaPlayer在运行时分为Client和Server两部分 Client层‌：位于Java层，用户通过调用Java层的API（如setDataSource）来操作MediaPlayer。 Server层‌：位于C层，负责实际的媒体处理工作。Server层通过Binder机…...

编程日记 2025/7/20 22:24:35

Elasticsearch：使用 AI SDK 和 Elastic 构建 AI 代理

作者：来自 Elastic Carly Richmond 你是否经常听到 AI 代理（AI agents）这个词，但不太确定它们是什么，或者如何在 TypeScript（或 JavaScript）中构建一个？跟我一起深入了解 AI 代理的概…...

编程日记 2025/7/20 22:47:55

echarts添加坐标轴点击事件 chart.on(click, (params) > {if(params.componentType yAxis && this.type ! 1){console.log(params);// 检查是否点击了系列数据console.log(你点击了 ${params.name} 的数据点，值为 ${params.value}); this.$bus.$emi…...

编程日记 2025/7/18 8:46:11

如何在linux中部署dns服务主备dns （详细全过程）

环境centos 7.9 主DNS：192.168.60.131 备DNS：192.168.60.134 我以 chenxingyu0.com 指向 192.168.60.200为例首先是主dns #!/bin/bash# 检查是否为 root 用户 if [ "$(id -u)" ! "0" ]; thenecho "请使用…...

编程日记 2025/7/20 7:04:46

GitLab 中文版17.10正式发布，27项重点功能解读【二】

GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。学习极狐GitLab 的相关资料： 极狐GitLab 官网极狐…...

编程日记 2025/7/20 22:32:21

matplotlib——南丁格尔玫瑰

南丁格尔玫瑰图（Nightingale Rose Chart），是一种特殊形式的柱状图，它以南丁格尔（Florence Nightingale）命名，她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。它将数据绘制在极坐…...

编程日记 2025/7/16 19:50:19

WPF 与 C# 融合开发：从基础到高级应用（一）

WPF 与 C# 融合开发：从基础到高级应用一、C# 语言基础回顾 1.1 C# 语言概述 C# 是微软开发的一种现代、面向对象的编程语言，它融合了 C、C 和 Java 等语言的优点，具有简洁、安全、高效等特点。C# 广泛应用于 Windows 平台的应用开发&…...

编程日记 2025/7/16 19:52:23

ref和reactive区别

在 Vue 3 中，ref 和 reactive 是两种创建响应式数据的主要 API，但它们的适用场景和使用方式有所不同。以下是它们的核心区别和示例： 一、核心区别特性refreactive适用数据类型所有类型（基本类型、对象、数组）仅对象或…...

编程日记 2025/7/10 11:28:56

精选10个好用的WordPress免费主题

10个好用的WordPress免费主题 1. Astra Astra 是全球最受欢迎的 WordPress 主题。它功能丰富，易于使用，SEO友好，是第一个安装量突破100万的非默认主题，并获得了5000多个五星好评。它完美集成了Elementor、Beaver，古…...

编程日记 2025/7/17 4:46:41

DerpNStink: 1靶场渗透

DerpNStink: 1 来自 <DerpNStink: 1 ~ VulnHub> 1，将两台虚拟机网络连接都改为NAT模式 2，攻击机上做namp局域网扫描发现靶机 nmap -sn 192.168.23.0/24 那么攻击机IP为192.168.23.182，靶场IP192.168.23.213 3，对靶机进行端…...

编程日记 2025/7/20 18:44:39

apache安装脚本使用shell建立

注意防火墙，yum，网络连接等以下是具体的apache安装脚本 #!/bin/bash # Set Apache version to install ## author: yuan # 检查外网连接 echo "检查外网连接..." ping www.baidu.com -c 3 > /dev/null 2>&1 if [ $? -eq 0 ]; …...

编程日记 2025/7/18 4:49:05

Azure SDK 使用指南

Azure SDK（软件开发工具包）是一组由微软提供的工具和库，旨在帮助开发者以多种编程语言（如 .NET、Java、Python、JavaScript 等）与 Azure 服务进行交互。通过使用 Azure SDK，开发者可以更高效地构建、部…...

编程日记 2025/7/20 16:21:12

DeepSeek-V3-0324 版本升级概要

DeepSeek-V3-0324 魔搭社区汇聚各领域最先进的机器学习模型，提供模型探索体验、推理、训练、部署和应用的一站式服务。https://modelscope.cn/models/deepseek-ai/DeepSeek-V3-0324 发布背景与改进根DeepSeek-V3-0324 展示了以下关键改进： 推理性能提…...

编程日记 2025/7/11 1:13:51

leetcode 150. 逆波兰表达式求值

150. 逆波兰表达式求值 - 力扣（LeetCode） class Solution:def evalRPN(self, tokens: List[str]) -> int:stack[]for item in tokens:if item not in ( ,-,* , / ):stack.append(item)else:preint(stack.pop())pre_beforeint(stack.pop())sign itemi…...

编程日记 2025/7/15 11:38:20

LangChain4j与DashScope深度集成实战：一站式开发指南

本篇文章会通篇详细的讲清楚LangChain4j与DashScope集成的各个方面，从Springboot的集成到Ai对话、会话记忆、RAG、FunctionCalling、互联网搜索、结构化的输出、多模态等都给出相应的说明，希望通过这篇文章对于LLM不了解的同仁一样可以扩展出自己的AI应用…...

编程日记 2025/7/19 11:39:12

逼用户升级Win11，微软开始给Win10限速

随着Windows10的支持时间越来越短，微软也加大了对Win10用户的驱赶力度。最近，微软官宣了将要在今年6月份降低OneNote for Windows 10的同步速度。软件也将和Windows10在今年的10月14日一同停止支持和维护。这将影响实时协作和多设备访问。对OneNote…...

编程日记 2025/7/20 5:49:08

工作流引擎Flowable介绍及SpringBoot整合使用实例

Flowable简介 Flowable 是一个轻量级的业务流程管理（BPM）和工作流引擎，基于 Activiti 项目发展而来，专注于提供高性能、可扩展的工作流解决方案。它主要用于企业级应用中的流程自动化、任务管理和审批流等场景。 Flowable 的核心…...

编程日记 2025/7/16 11:44:51

【R语言可视化】相关系数热图

目录热图无显著性结果展示01： 热图显著性结果展示02： ggplot2绘制三角热图结果展示03： corrplot绘制三角热图结果展示04: 热图无显著性 # 示例数据 data(mtcars) df <- mtcars# 计算相关矩阵 cor_matrix <- round(cor(df…...

编程日记 2025/7/19 18:23:33

【区块链 + 文化版权】文创链 | FISCO BCOS 应用案例

“文创链”是由四川省区块链行业协会、成都音像出版社有限公司共同发起， 由成都九天星空科技有限公司等联合打造的数字文创领域联盟链。平台采用FISCO BCOS 开源底层框架， 为数字文创产业构建一个高效、透明、可信的版权管理与交易平台。平台专注于数字…...

编程日记 2025/7/14 23:54:27

# 使用自定义Shell脚本hello快速配置Linux用户账户

使用自定义Shell脚本快速配置Linux用户账户在学校实验室管理Linux服务器，或者公司小团队管理服务器时，大家需要一个能隔离自己服务，但是自己又需要对服务器的完整权限的情形。创建和配置用户账户是一项常见但繁琐的任务。特别是当你需要频繁…...

编程日记 2025/7/19 11:55:07

PyTorch中的Tensor

PyTorch中的Tensor‌ 是核心数据结构，类似于 NumPy 的多维数组，但具备 GPU 加速和自动求导等深度学习特性。一、基本概念 ‌核心数据结构‌ Tensor 是存储和操作数据的基础单元，支持标量（0D）、向量（1D&am…...

编程日记 2025/7/17 15:55:38

16-CSS3新增选择器

知识目标掌握属性选择器的使用掌握关系选择器的使用掌握结构化伪类选择器的使用掌握伪元素选择器的使用如何减少文档内class属性和id属性的定义，使文档变得更加简洁？ 可以通过属性选择器、关系选择器、结构化伪类选择器、伪元素选择器。 1. 属性选择…...

编程日记 2025/7/18 20:56:27

关于笔记本电脑突然没有wifi图标解决方案

笔记本电脑突然没有wifi图标解决方案，设置里也看不见wifi，电脑突然就连不网络了解决方案： 我的电脑——>管理——>服务和应用程序——>服务——>找到WLAN AutoConfig——>点击启动就好了...

编程日记 2025/6/28 6:01:25

Pytorch学习笔记（七）Learn the Basics - Optimizing Model Parameters

这篇博客瞄准的是 pytorch 官方教程中 Learn the Basics 章节的 Optimizing Model Parameters 部分。官网链接：https://pytorch.org/tutorials/beginner/basics/optimization_tutorial.html 完整网盘链接: https://pan.baidu.com/s/1L9PVZ-KRDGVER-AJnXOvlQ?pwd…...

编程日记 2025/7/16 20:02:12

数据可视化TensorboardX和tensorBoard安装及使用

tensorBoard 和TensorboardX 安装及使用指南 tensorBoard 和 TensorBoardX 是用于可视化机器学习实验和模型训练过程的工具。TensorBoard 是 TensorFlow 官方提供的可视化工具，而 TensorBoardX 是其社区驱动的替代品，支持 PyTorch 等其他框架。以下是它…...

编程日记 2025/7/14 20:20:56

工业4G路由器赋能智慧停车场高效管理

工业4G路由器作为智慧停车场管理系统通信核心，将停车场内的各个子系统连接起来，包括车牌识别系统、道闸控制系统、车位检测系统、收费系统以及监控系统等。通过4G网络，将这些系统采集到的数据传输到云端服务器或管理中心，实现信息…...

编程日记 2025/7/19 6:19:47

深度学习1—Python基础

深度学习1—python基础你的第一个程序 print(hello world and hello deep learning!)基本数据结构空值 (None)：在 Python 中，None 是一个特殊的对象，用于表示空值或缺失的值。它不同于数字 0，因为 0 是一个有意义的数字&#…...

编程日记 2025/7/13 23:07:34

数据结构十三、set map

一、set 1、size / empty size：返回set中实际元素的个数 empty：判断set是否为空 2、begin / end 这是两个迭代器，因此可以使用范围for来遍历整个红黑树。其中，遍历是按照中序遍历的顺序，因此是一个有序序列。 3、in…...

编程日记 2025/7/17 23:23:27

【大模型基础_毛玉仁】3.5 Prompt相关应用

目录 3.5 相关应用3.5.1 基于大语言模型的Agent3.5.2 数据合成3.5.3 Text-to-SQL3.5.4 GPTs 3.5 相关应用 Prompt工程应用广泛，能提升大语言模型处理基础及复杂任务的能力，在构建Agent、数据合成、Text-to-SQL转换和设计个性化GPTs等方面不可或缺。 . …...

编程日记 2025/7/18 12:50:09

自动驾驶VLA模型技术解析与模型设计

1.前言 2025年被称为“VLA上车元年”，以视觉语言动作模型（Vision-Language-Action Model, VLA）为核心的技术范式正在重塑智能驾驶行业。VLA不仅融合了视觉语言模型（VLM）的感知能力和端到端模型的决策能力，…...

编程日记 2025/7/20 17:07:17

【AI】Orin NX+ubuntu22.04上移植YoloV11，并使用DeepStream测试成功

【AI】郭老二博文之：AI学习目录汇总 1、烧写系统新到的开发板，已经烧写好Ubuntu系统，版本为22.04。如果没有升级到Ubuntu22.04，可以在电脑Ubuntu系统中使用SDKManager来烧写Ubuntu系统，网络情况好的话，也可以直接将CUDA、cuDNN、TensorRT、Deepstream等也安装上。 2…...

编程日记 2025/7/15 17:12:44

vscode 通过Remote-ssh远程连接服务器报错 could not establish connection to ubuntu

vscode 通过Remote-ssh插件远程连接服务器报错 could not establish connection to ubuntu，并且出现下面的错误打印： [21:00:57.307] Log Level: 2 [21:00:57.350] SSH Resolver called for "ssh-remoteubuntu", attempt 1 [21:00:57.359] r…...

编程日记 2025/7/18 7:17:52

ESP32S3 WIFI 实现TCP服务器和静态IP

一、 TCP服务器代码代码由station_example_main的官方例程修改 /* WiFi station ExampleThis example code is in the Public Domain (or CC0 licensed, at your option.)Unless required by applicable law or agreed to in writing, thissoftware is distributed on an &q…...

编程日记 2025/7/13 6:47:47

第三课：Stable Diffusion图生图入门及应用

文章目录 Part01 图生图原理Part02 图生图基本流程Part03 随机种子作用解析Part04 图生图的拓展应用 Part01 图生图原理当提示词不能足够表达用户需求的时候，加入图片能让AI更好的理解你的想法图片上的像素信息会在加噪和去噪的过程中，作为一种特征反映…...

编程日记 2025/7/20 17:14:59

蓝桥与力扣刷题（蓝桥蓝桥骑士）

题目：小明是蓝桥王国的骑士，他喜欢不断突破自我。这天蓝桥国王给他安排了 N 个对手，他们的战力值分别为 a1,a2,...,an，且按顺序阻挡在小明的前方。对于这些对手小明可以选择挑战，也可以选择避战。身为高傲的骑士&a…...

编程日记 2025/7/19 6:39:47

Photoshop怎样保存为ico格式

1. 打开图像开启 Photoshop 软件，选择 “文件” 菜单，点击 “打开” 选项，然后找到你想要保存为 ICO 格式的图像文件并打开。 2. 调整图像大小（可选） ICO 图标通常有特定尺寸要求，你可以根据需求调整图像…...

编程日记 2025/7/16 23:10:58

Ubuntu xinference部署本地模型bge-large-zh-v1.5、bge-reranker-v2-m3

bge-large-zh-v1.5 下载模型到指定路径： modelscope download --model BAAI/bge-large-zh-v1.5 --local_dir ./bge-large-zh-v1.5自定义 embedding 模型，custom-bge-large-zh-v1.5.json： {"model_name": "custom-bge-large…...

编程日记 2025/7/14 14:08:50

python笔记之判断月份有多少天

1、通过随机数作为目标月份 import random month random.randint(1,12)2、判断对应的年份是闰年还是平年因为2月这个特殊月份，闰年有29天，而平年是28天，所以需要判断对应的年份属于闰年还是平年，代码如下 # 判断年份是闰年还…...

编程日记 2025/7/15 22:25:33

Kotlin泛型：协变｜逆变｜不变

引言无论java 通配符上限还是下限，都多少存在缺陷，要么存不安全，要么取不安全。而kotlin就解决这个问题。让out 纯输出， 让in纯输入。 java这块知识： java泛型的协变、逆变和不变-CSDN博客协变生产者out T 协变…...

编程日记 2025/7/17 18:53:12

高斯数据库的空分区的查看和清理

在高斯数据库（GaussDB） 中，分区表是一种常见的表设计方式，用于优化大数据的查询性能。一、空分区的影响： 存储空间占用元数据开销：即使分区中没有数据，数据库仍然需要维护分区的元数据&…...

编程日记 2025/7/18 1:30:57

word使用自带的公式

文章目录 Word公式中word公式快捷键：word2016公式框输入多行word 公式加入空格：word公式如何输入矩阵:公式图片转为Latex语法word 能直接输入 latex 公式么word公式中有的是斜体有的不是 word文本中将文字转为上标的快捷键 Tips几个好用的网站&#xff1…...

编程日记 2025/7/13 1:20:48

Linux系统-ls命令

一、ls命令的定义 Linux ls命令（英文全拼：list directory contents）用于显示指定工作目录下之内容（列出目前工作目录所含的文件及子目录)。二、ls命令的语法 ls [选项] [目录或文件名] ls [-alrtAFR] [name...] 三、参数[选项…...

编程日记 2025/7/15 14:14:26

数据结构：利用递推式计算next表

next 表是 KMP 算法的核心内容，下面介绍一种计算 next 表的方法：利用递推式计算如图 6.3.1 所示，在某一趟匹配中，当对比到最后一个字符的时候，发现匹配失败（s[i] ≠ t[j]）。根据 BF 算法&…...

编程日记 2025/7/18 18:12:47

一、核心概念与语法

1. @keyframes 关键帧

2. animation 属性

二、动画调速函数（animation-timing-function）

1. 预设值

2. 贝塞尔曲线

3. 步进函数（steps()）

三、动画控制与交互

1. 暂停与恢复

2. JavaScript 控制

3.逐帧动画与精灵图

四、性能优化

五、实际应用示例

1. 淡入淡出效果

2. 旋转加载图标

3. 弹跳效果

六、兼容性与前缀

示例：走马灯

示例：全民出游季

相关文章：

1. `@keyframes` 关键帧

2. `animation` 属性

二、动画调速函数（`animation-timing-function`）

3. 步进函数（`steps()`）