前端炫酷动画--文字(二)
目录
一、弧形边框选项卡
二、零宽字符
三、目录滚动时自动高亮
四、高亮关键字
五、文字描边
六、按钮边框的旋转动画
七、视频文字特效
八、立体文字特效+让文字立起来
九、文字连续光影特效
十、重复渐变的边框
十一、磨砂玻璃效果
十二、FLIP动画
一、弧形边框选项卡
<style>.tab {width: 150px;height: 40px;color: #fff;text-align: center;line-height: 40px;margin: 0 auto;background: #ed6a5e;border-radius: 10px 10px 0 0;position: relative;transform: perspective(30px) rotateX(13deg);transform-origin: center bottom; /* 以tab最下方的线为中心进行旋转 */}.tab::before,.tab::after {content: "";position: absolute;width: 10px;height: 10px;bottom: 0;background: #000;}.tab::before {left: -10px;background: radial-gradient(circle at 0 0,transparent 10px,#ed6a5e 10px); /* 左边以左上角为圆点进行径向渐变 */}.tab::after {right: -10px;background: radial-gradient(circle at 100% 0,transparent 10px,#ed6a5e 10px); /* 右边以右上角为圆点进行径向渐变 */}</style>二、零宽字符
<script>// 判断字符串中是否包含零宽字符function containsZeroWidthCharacter(str) {// 正则表达式匹配零宽字符const zeroWidthRegex = /[\u200B\u200C\u200D\uFEFF]/g;return zeroWidthRegex.test(str);}console.log(containsZeroWidthCharacter("Hello\u200B World")); // trueconsole.log(containsZeroWidthCharacter("Hello World")); // false</script>常见的零宽字符包括：
1、零宽空格【Unicode：U+200B】
这是一个没有宽度的空格，可以在两个字符之间插入，但不会在视觉上产生间隔。
2、零宽非连接符【Unicode：U+200C】
用于阻止字符连接。在阿拉伯语或印地语中，用来控制哪些字符应该连接，哪些不应连接。
3、零宽连接符【Unicode：U+200D】
用于强制某些字符连接在一起，这通常在一些复合字符或表情符号中起作用。与2相反
4、零宽非换行空格【Unicode：U+FEFF】
用于文件中的字节顺序标记，但也可以用作零宽空格的一种形式。作用是防止换行。
尽管零宽字符对用户不可见，但它们会占用存储空间，通常用于文本隐写、防止链接自动化处理、格式化和排版。比如文本处理时加上零宽字符，可以防止文本被盗窃，解码后是自己的名称。
三、目录滚动时自动高亮
<style>body {display: flex;margin: 0;}/* 左侧目录 */.sidebar {width: 250px;background-color: #333;color: white;padding: 20px;height: 100vh;position: fixed;top: 0;left: 0;overflow-y: auto;}.sidebar a {color: white;text-decoration: none;display: block;padding: 10px;margin: 5px 0;}.sidebar a:hover {background-color: #575757;}.highlight {background-color: #ffcc00; /* 高亮颜色 */}/* 右侧内容 */.content {margin-left: 280px; /* 留出左侧目录栏空间 */padding: 20px;width: calc(100% - 260px);}h1 {color: #333;}.section {margin-bottom: 30px;height: 750px;border: 1px solid yellowgreen;}.section h2 {color: #444;}</style><body><div class="sidebar toc"><h2>目录</h2><a href="#section1">部分 1</a><a href="#section2">部分 2</a><a href="#section3">部分 3</a><a href="#section4">部分 4</a></div><div class="content"><div class="section" id="section1"><h2>部分 1</h2><p>第一部分内容。</p></div><div class="section" id="section2"><h2>部分 2</h2><p>第二部分内容。</p></div><div class="section" id="section3"><h2>部分 3</h2><p>第三部分内容。</p></div><div class="section" id="section4"><h2>部分 4</h2><p>第四部分内容。</p></div></div><script>function highlight(id) {document.querySelectorAll("a.highlight").forEach((a) => a.classList.remove("highlight"));if (id instanceof HTMLElement) {id.classList.add("highlight");return;}if (id.startsWith("#")) {id = id.substring(1);}document.querySelector(`a[href="#${id}"]`).classList.add("highlight");}const links = document.querySelectorAll('.toc a[href^="#"]');const titles = [];for (const link of links) {link.addEventListener("click", () => {highlight(link.getAttribute("href").substring(1));});const url = new URL(link.href);const dom = document.querySelector(url.hash);if (dom) {titles.push(dom);}}function debounce(fn, delay = 100) {let timer = null;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};}const scrollHandler = debounce(() => {const rects = titles.map((title) => title.getBoundingClientRect());const range = 300;for (let i = 0; i < titles.length; i++) {const title = titles[i];const rect = rects[i];// 标题区域在指定范围内就高亮if (rect.top >= 0 && rect.top <= range) {highlight(title.id);break;}// 当前内容标题在展示视口之上，并且下一个标题在展示视口之下，此时高亮此标题if (rect.top < 0 &&rects[i + 1] &&rects[i + 1].top > document.documentElement.clientHeight) {highlight(title.id);break;}}}, 100);window.addEventListener("scroll", scrollHandler);</script></body>四、高亮关键字
<style>.highlight {color: red;font-weight: bold;}
</style><body><div><input type="text" class="txtKeyword" /><ul></ul></div><script>const ul = document.querySelector("ul");const txtKeyword = document.querySelector(".txtKeyword");function setHTML(lists) {ul.innerHTML = lists.map((l) => {let cname = l.cname;// 如果输入框有内容，则进行高亮匹配if (txtKeyword.value) {const reg = new RegExp(txtKeyword.value, "ig");cname = cname.replace(reg, function (key) {return `<span class="highlight">${key}</span>`;});}return `<li><span>${cname}</span></li>`;}).join(""); // 使用 join 合并生成的 HTML 字符串}const NameLists = [{ cname: "前端" },{ cname: "后端" },{ cname: "测试员" },{ cname: "运维师" },];// 筛选包含关键字的元素function filterList() {const keyword = txtKeyword.value.trim();if (keyword) {const filtered = NameLists.filter((item) =>item.cname.match(new RegExp(keyword, "i")));setHTML(filtered);} else {setHTML(NameLists);}}setHTML(NameLists);// 给输入框添加监听事件，以便动态更新txtKeyword.addEventListener("input", filterList);</script></body>五、文字描边
第一种text-shadow：给8个方向即可，但是连接处有瑕疵(见红色边缘部分)
@mixin text-stroke($color: #fff, $width: 1px) {text-shadow: 0 -#{$width} #{$color}, #{$width} 0 #{$color},0 #{$width} #{$color}, -#{$width} 0 #{$color}, #{$width} #{$width} #{$color},-#{$width} -#{$width} #{$color}, #{$width} -#{$width} #{$color},-#{$width} #{$width} #{$color};
}
p {font-size: 50px;font-weight: bold;@include text-stroke(red, 2px);// color: transparent; 不支持文字透明
}p {font-size: 50px;font-weight: bold;text-shadow: 0 -2px gold, 2px 0 gold, 0 2px gold, -2px 0 gold,/* 上、右、下、左 */ 2px 2px gold, -2px -2px gold, 2px -2px gold,-2px 2px gold; /* 四个对角线 */
}第二种-webkit-text-stroke不仅边缘平滑，并且支持透明
p {font-size: 50px;font-weight: bold;-webkit-text-stroke: 2px red;color: transparent; //支持文字透明position: relative;
}
// -webkit-text-stroke是居中描边，原来字体变小了，可以在"画一层"盖上去
p::after {content: attr(data-text);position: absolute;left: 0;top: 0;-webkit-text-stroke: 0;
}六、按钮边框的旋转动画
原理：在按钮层级下加一个矩形，围绕按钮中心进行360度旋转，多余矩形隐藏
<style>button {width: 100px;height: 50px;color: white;outline: none;z-index: 1;border-radius: 10px;cursor: pointer;background: black;/* outline: 4px solid gold; */position: relative;overflow: hidden;}button::before {content: "";position: absolute;width: 200%;height: 200%;background: blue;z-index: -2;left: 50%;top: 50%;transform-origin: left top;/* 圆点在左上角 */animation: rotation 2s linear infinite;}button::after {content: "";position: absolute;--g: 4px;width: calc(100% - var(--g) * 2);height: calc(100% - var(--g) * 2);background: black;left: var(--g);top: var(--g);border-radius: inherit;z-index: -1;}@keyframes rotation {to {transform: rotate(360deg);}}</style>七、视频文字特效
<style>.txt{position:absolute;inset: 0;background: #fff;display: flex;justify-content: center;align-items: center;mix-blend-mode: screen; /* 增强亮度，使图像或元素显得更加明亮 */}</style>
<body><div class="container"><video src="./fire.mp4" autoplay muted></video><div class="txt">大前端</div></div>
</body>八、立体文字特效+让文字立起来
放大看是叠加出来的，真正要做得建模
<style>body {background-color: brown;color: #fff;padding: 30px;}.text1 {font-size: 5em;text-shadow: -1px 1px #bbb, -2px 2px #bbb, -3px 3px #bbb, -4px 4px #bbb,-5px 5px #bbb, -10px 10px 3px #0008;}.text2 {font-weight: 700;position: relative;}.text2::after {content: "DARKNESS";position: absolute;left: 0;top: 0;color: #000;transform: translate(-25px, 2px) scale(0.9) skew(50deg);z-index:-1;filter: blur(2px);mask:linear-gradient(transparent,#000)}</style><body><h1 class="text1">立体文字</h1><h1 class="text2">DARKNESS</h1></body>九、文字连续光影特效
span {color: #faebd7;animation: colorChange 1s infinite alternate;
}
@keyframes colorChange {to {color: #ff0266;}
}
@for $i from 1 through 7 {span:nth-child(#{$i}) {animation-delay: ($i - 1) * 0.1s;}
}十、重复渐变的边框
<style>.card {width: 217px;margin: 0 auto;color: #333;line-height: 1.8;border-radius: 10px;background: repeating-linear-gradient(-45deg,#e8544d 0 10px,#fff 10px 20px,#75adf8 20px 30px,#fff 30px 40px) -20px -20px/200% 200%;padding: 5px;transition: 0.5s;}.card:hover {background-position: 0 0;}.container {background: #fff;border-radius: inherit;}</style><body><div class="card"><div class="container">重复渐变的边框原理：<br/>设置背景为重复的线性渐变。渐变角度为-45度，包含四个颜色区块。</div></div></body>十一、磨砂玻璃效果
<style>.wrap {text-align: center;color: white;}.modal {background: rgba(255, 255, 255, 0.4); /* 半透明背景 */backdrop-filter: blur(10px); /* 模糊背景 */border-radius: 15px; /* 圆角 */padding: 40px;width: 300px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 增加阴影 */font-size: 24px;}</style><body><div class="wrap"><div class="modal">磨砂玻璃效果</div></div></body>十二、各种FLIP动画
参考：https://zhuanlan.zhihu.com/p/712766286
<style>.box {width: 60px;height: 60px;background-color: skyblue;color: white;font-size: 30px;margin: 10px;}</style><body><div class="container" style="display: flex"><div class="box" key="1">1</div><div class="box" key="2">2</div><div class="box" key="3">3</div><div class="box" key="4">4</div><div class="box" key="5">5</div></div><button onclick="shuffle()">打乱</button><script>function shuffle() {const container = document.querySelector(".container");const boxes = Array.from(container.children);// First: 记录每个盒子的起始位置const startPositions = boxes.reduce((result, box) => ({...result,[box.getAttribute("key")]: box.getBoundingClientRect(),}),{});// 随机打乱盒子顺序，然后把打乱好的盒子放回 DOMboxes.sort(() => Math.random() - 0.5);boxes.forEach((box) => container.appendChild(box));// Last: 记录每个盒子的最终位置const endPositions = boxes.reduce((result, box) => ({...result,[box.getAttribute("key")]: box.getBoundingClientRect(),}),{});// Invert: 计算 “反向” 偏移量boxes.forEach((box) => {const key = box.getAttribute("key");const start = startPositions[key];const end = endPositions[key];// 注意，此时 DOM 已经处于最终位置，所以它的 translate 是 “反向” 的// 所以要用 first 来减去 lastconst deltaX = start.left - end.left;const deltaY = start.top - end.top;// 如果元素 “原地不动”，那么跳过后续流程if (deltaX === 0 && deltaY === 0) {return;}// 让元素通过 transform 偏移回到起点box.style.transition = null; // 暂时屏蔽掉过渡，实际生产此处需完善box.style.transform = `translate(${deltaX}px, ${deltaY}px)`;// Play: 在重绘之前，撤掉 transform 偏移，播放 “归位” 过渡动画requestAnimationFrame(() => {box.style.transition = `transform 2s`;box.style.transform = "";});// FLIP 动画完成后，清理残余样式box.addEventListener("transitionend",() => {box.style.transition = null;box.style.transform = null;},{ once: true });});}</script></body>其中的“Invert” 和 “Play” 步骤可以使用 Web Animation API 进行简化
<style>.box {width: 60px;height: 60px;color: white;font-size: 30px;margin: 10px;box-sizing: border-box;background-color: skyblue;border: 2px black solid;transition: width 500ms, height 500ms;}.scale {position: absolute;top: 90px;left: 10px;width: 120px;height: 120px;z-index: 10;}</style><body><div class="container" style="display: flex"><div class="box" key="1">1</div><div class="box" key="2">2</div><div class="box" key="3">3</div><div class="box" key="4">4</div><div class="box" key="5">5</div></div><script>const container = document.querySelector('.container')const boxes = Array.from(container.children)boxes.forEach(box => {box.addEventListener('click', () => {// First: 记录每个盒子的起始位置const startPositions = boxes.reduce((result, box) => ({...result,[box.getAttribute('key')]: box.getBoundingClientRect(),}),{})box.classList.toggle('scale')// Last: 记录每个盒子的最终位置const endPositions = boxes.reduce((result, box) => ({...result,[box.getAttribute('key')]: box.getBoundingClientRect(),}),{})// Invert: 计算 “反向” 偏移量boxes.forEach(box => {const key = box.getAttribute('key')const start = startPositions[key]const end = endPositions[key]// 注意，此时 DOM 已经处于最终位置，所以它的 transform 是 “反向” 的// 所以要用 first 来减去 lastconst deltaX = start.left - end.leftconst deltaY = start.top - end.top// 如果元素 “原地不动”，那么跳过后续流程if (deltaX === 0 && deltaY === 0) {return}// 将盒子通过 transform 移至初始位置box.style.transition = ''box.style.transform = `translate(${deltaX}px, ${deltaY}px)`// Play: 播放动画应用变换requestAnimationFrame(() => {box.style.transition = `all 500ms`box.style.transform = ''})// FLIP 动画完成后，清理残余样式box.addEventListener('transitionend',() => {box.style.transition = nullbox.style.transform = null},{ once: true })})})})</script></body>Vue 内置组件 <TransitionGroup> 已经实现了 FLIP 动画
<template><TransitionGroup style="display: flex" name="flip" tag="div"><div class="box" v-for="item of list" :key="item">{{ item }}</div></TransitionGroup><button @click="shuffle">打乱</button>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([1, 2, 3, 4, 5])
const shuffle = () => void list.sort(() => Math.random() - 0.5)
</script>
<style scoped>
.box {width: 60px;height: 60px;background-color: skyblue;color: white;font-size: 30px;margin: 10px;
}
.flip-move {transition: all 2s;
}
</style>react-flip-toolkit 工具是一个用于实现组件 FLIP 动画的 React 库。
相关文章：
前端炫酷动画--文字(二)
目录 一、弧形边框选项卡 二、零宽字符 三、目录滚动时自动高亮 四、高亮关键字 五、文字描边 六、按钮边框的旋转动画 七、视频文字特效 八、立体文字特效让文字立起来 九、文字连续光影特效 十、重复渐变的边框 十一、磨砂玻璃效果 十二、FLIP动画 一、弧形边框…...
ceph 数据均衡
实现数据均衡的主要方法 在 Ceph 集群中，实现 OSD（对象存储守护进程）之间的数据均衡对于提升性能和资源利用率至关重要。以下是实现数据均衡的主要方法： 1. 调整 OSD 权重（Reweight） 通过调整 OSD 的权重，可以控制数据在各个 OSD 之间的分布。Ceph 提供了根据利用率或…...
代码随想录算法训练营day29
代码随想录算法训练营 —day29 文章目录 代码随想录算法训练营前言一、134. 加油站暴力解法贪心算法 二、135. 分发糖果三、860. 柠檬水找零四、406.根据身高重建队列vector版list版 总结 前言 今天是算法营的第29天，希望自己能够坚持下来！ 今日任务&a…...
android studio根据包名获取当前安装包信息
package com.example.myapplication2;import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.PackageManager; import android.util.Log;/**** 获取版本信息*/ public class SystemHelper {/*** 获取本地软件版本号*/public stat…...
学习第六十五行
仔细观察键盘，会发现一个$符号，其实是有含义的。 在 shell 脚本中，美元符号 $ 有几种重要的含义： 变量引用：$ 用于引用变量的值。例如，如果你有一个变量 name，可以通过 $name 来获取它的值。 n…...
零碎的知识点（七）：线性二次调节器（LQR）是什么？
线性二次调节器（LQR）是什么？ 1. LQR的定义与目标2. LQR的原理性能指标 J J J最优解的计算控制律 3. LQR的性质4. 举例说明问题描述解步骤仿真结果 5. 实际应用总结 线性二次调节器（LQR） 是一种经典的最优控制方法&…...
Matlab一些使用技巧
代码分段 两个百分号就可以实现代码的分段，不同段之间会以不同的背景色显示，方便调试 如下： %% 腐蚀 stlen TimeWidth*Fs/50; %线性算子的长度，1/100的脉宽，对应0.5us，15个采样点 stlen 100; SE strel…...
Linux 发行版介绍与对比：Red Hat、Ubuntu、Kylin、Debian
Linux 操作系统有众多发行版（Distros），每个发行版的设计目标、目标用户、应用场景和使用方式有所不同。常见的 Linux 发行版包括 Red Hat、Ubuntu、Kylin 和 Debian。以下是这些发行版的详细介绍与对比，以及它们的应用场景和使用方…...
从CentOS到龙蜥：企业级Linux迁移实践记录（龙蜥开局）
引言： 在我们之前的文章中，我们详细探讨了从CentOS迁移到龙蜥操作系统的基本过程和考虑因素。今天，我们将继续这个系列，重点关注龙蜥系统的实际应用——特别是常用软件的安装和配置。 龙蜥操作系统（OpenAnolis&#…...
java1-相对路径与绝对路径
注意注意~开始新部分啦! 开始正式分享java前,先为大家分享一下一个常用的概念---文件的相对路径与绝对路径. 开篇明义: 相对路径是指一个文件或目录相对于当前工作目录的路径。相对路径不包含根目录，而是从当前目录开始计算。 绝对路径是指一个文件或目录从根目录…...
iChainfo 品牌升級為 ichaingo，打造 Web3 數據基礎設施新標杆
Web3 數據基礎設施服務商 iChainfo 今⽇正式宣佈，全新名稱 「ichaingo」 重磅登場，新的官⽅網站 ichaingo.com 正式上線。此次品牌升級基於 Web3 ⾏業的發展趨勢和公司⾃⾝的戰略布局，旨在為全 球⽤戶提供更準確、即時、全⾯、深⼊的 Web3 數…...
Flink概念知识讲解之：Restart重启策略配置
Flink概念知识讲解之：Restart重启策略配置 当 Task 发生故障时，Flink 需要重启出错的 Task 以及其他受到影响的 Task ，以使得作业恢复到正常执行状态。 Flink 通过重启策略和故障恢复策略来控制 Task 重启：重启策略决定是否可以…...
[java基础-集合篇]LinkedList源码粗析
LinkedList 的数据结构 实现List、Deque 接口，基于 双向链表实现的列表。与基于数组的 ArrayList 不同，基于链表的LinkedList 允许在列表的任何位置快速地插入和删除元素。 Java中LinkedList实现了Deque，它提供了 add, offer, remove, poll, …...
面试：C++类成员初始化顺序
1、非静态数据成员：按它们在类定义的声明顺序初始化，不会按它们在初始化列表的顺序。 2、静态数据成员：在main函数启动之前，并且只初始化一次 3、基类构造函数：如果类从一个或多个基类继承而来，基类的构造…...
【Python】Python与C的区别
文章目录 语句结束符代码块表示变量声明函数定义注释格式Python的标识符数据输入input()函数数据输出print()函数 语句结束符 C 语言 C 语言中每条语句必须以分号;结束。例如，int a 10;、printf("Hello, World!");。分号是语句的一部分，用于…...
[开源]自动化定位建图系统(视频)
系统状态机： 效果展示： 1、 机器人建图定位系统-基础重定位，定位功能演示 2、 机器人建图定位系统-增量地图构建，手动回环检测演示 3、… 开源链接： https://gitee.com/li-wenhao-lwh/lifelong-backend Qt人机交互…...
ISP流程--去马赛克详解
前言 本期我们将深入讨论ISP流程中的去马赛克处理。我们熟知，彩色图像由一个个像元组成，每个像元又由红、绿、蓝（RGB）三通道构成。而相机传感器只能感知光的强度，无法直接感知光谱信息，即只有亮暗而没有颜色…...
Objective-C语言的软件工程
Objective-C语言的软件工程探讨 引言 在软件工程的领域中，编程语言的选择是至关重要的。Objective-C，作为一种为苹果公司的macOS和iOS操作系统而开发的编程语言，凭借其灵活性和强大的功能被广泛应用于应用开发。然而，随着Swift等…...
Objective-C语言的语法糖
Objective-C语言的语法糖探秘 在编程语言的发展历程中，语法糖（Syntactic Sugar）是一个颇具趣味性和重要性的概念。它让编程的表达更加简洁直观，同时提高了代码的可读性和可维护性。Objective-C 作为一种面向对象的编程语言&#…...
设计模式中的代理模式
在Java中，代理模式（Proxy Pattern）可以通过静态代理和动态代理两种主要方式实现。 一、静态代理模式 在编译时就已经确定了代理类和被代理类的关系。 代理类和目标对象通常实现相同的接口或继承相同父类。 缺点是对于每个需要代理的目标对象…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...
嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数（接收函数） sendto函数（发送函数） 五、网络编程之 UDP 用…...
解决MybatisPlus使用Druid1.2.11连接池查询PG数据库报Merge sql error的一种办法
目录 前言 一、问题重现 1、环境说明 2、重现步骤 3、错误信息 二、关于LATERAL 1、Lateral作用场景 2、在四至场景中使用 三、问题解决之道 1、源码追踪 2、关闭sql合并 3、改写处理SQL 四、总结 前言 在博客：【写在创作纪念日】基于SpringBoot和PostG…...
【系统架构设计师-2025上半年真题】综合知识-参考答案及部分详解（回忆版）
更多内容请见： 备考系统架构设计师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20~21题】【第…...
codeforces C. Cool Partition
目录 题目简述： 思路： 总代码： https://codeforces.com/contest/2117/problem/C 题目简述： 给定一个整数数组，现要求你对数组进行分割，但需满足条件：前一个子数组中的值必须在后一个子数组中…...
JS的传统写法 vs 简写形式
一、条件判断与逻辑操作 三元运算符简化条件判断 // 传统写法 let result; if (someCondition) {result yes; } else {result no; }// 简写方式 const result someCondition ? yes : no;短路求值 // 传统写法 if (condition) {doSomething(); }// 简写方式 condition &…...