前端炫酷动画--文字(二)
目录
一、弧形边框选项卡
二、零宽字符
三、目录滚动时自动高亮
四、高亮关键字
五、文字描边
六、按钮边框的旋转动画
七、视频文字特效
八、立体文字特效+让文字立起来
九、文字连续光影特效
十、重复渐变的边框
十一、磨砂玻璃效果
十二、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）可以通过静态代理和动态代理两种主要方式实现。 一、静态代理模式 在编译时就已经确定了代理类和被代理类的关系。 代理类和目标对象通常实现相同的接口或继承相同父类。 缺点是对于每个需要代理的目标对象…...
15个学习Python 的编程游戏网站
从小很多人都会在想，那些枯燥的教学课程要是全部变成游戏就好了，这样的话那期末成绩不得立即起飞了嘛？那对于编程很多人也有这样的想法，边玩边学就好了 这不已经有很多程序员开发了多款边玩边学的编程游戏供大家使用，…...
微信小程序实现拖拽盒子效果
要实现一个当前盒子高度由里面的盒子进行支配高度拖拽的效果 // wxml<view class"exmation-item" wx:elif"{{type4}}"> <view class"exmation-item-drag-box" id"drag-box"> <!-- 内容 --><view class"exm…...
Linux-蓝牙协议
SPP (Serial Port Profile): 串口协议（SPP）是一个蓝牙配置文件，允许设备通过蓝牙模拟传统的串行端口通信。它通常用于无线串口连接，允许设备如计算机和外设（例如打印机或条形码扫描器）之间进行数据传输。A…...
moviepy 将mp4视频文件提取音频mp3 - python 实现
DataBall 助力快速掌握数据集的信息和使用方式，会员享有 百种数据集，持续增加中。 需要更多数据资源和技术解决方案，知识星球： “DataBall - X 数据球(free)” -------------------------------------------------------------…...
imageio 图片转mp4 保存mp4
目录 安装： imageio 图片转mp4 numpy 保存mp4 安装： FFMPEG: pip install imageio[ffmpeg] pyav: pip install imageio[pyav] imageio 图片转mp4 import glob import osimport cv2 import imageio from natsort import natsortedfrom PIL import …...
Postman接口测试04|批量运行测试用例、参数化、Mock Server、Cookie鉴权、Newman生成测试报告
目录 十一、Postman批量运行测试用例 十二、实现数据驱动（也称参数化） 1、csv文件 1️⃣编辑csv文件 2️⃣更新参数的值 3️⃣修改测试脚本和断言 5️⃣批量运行测试用例 2、Json文件 1️⃣编辑Json文件 2️⃣其他操作和处理csv文件相同 十三、…...
学技术学英语：http状态码 401 Unauthorized vs 403 Forbidden
📢📢📢：先看关键单词，再看英文，最后看中文总结，再回头看一遍英文原文，效果更佳！！ 关键词 unauthorized未授权的/ˌʌnˈɔːθəraɪzd/authentication认证/…...
@LocalBuilder装饰器： 维持组件父子关系
一、前言 当开发者使用Builder做引用数据传递时，会考虑组件的父子关系，使用了bind(this)之后，组件的父子关系和状态管理的父子关系并不一致。为了解决组件的父子关系和状态管理的父子关系保持一致的问题，引入LocalBuilder装饰器。…...
React（二）——Admin主页/Orders页面/Category页面
文章目录 项目地址一、侧边栏1.1 具体实现 二、Header2.1 实现 三、Orders页面3.1 分页和搜索3.2 点击箭头显示商家所有订单3.3 页码按钮以及分页 四、Category页面4.1 左侧商品添加栏目4.2 右侧商品上传栏 五、Sellers页面六、Payment Request 页面（百万数据加载&a…...
移动端屏幕分辨率rem,less
谷歌模拟器：能直接看到移动端效果 屏幕分辨率 右键电脑桌面 ，点击显示设置 PC端是逻辑分辨率，移动端代码也是参考逻辑分辨率 网页端宽度和逻辑分辨率尺寸相同 手机屏幕尺寸不同，网页宽度均为 100% 所以就需要添加视口标签&#x…...
做化工的外贸网站都有什么意思/太原网站制作优化seo
前言：这次的比赛一共有六道web题，接下我会详细介绍解题的步骤以及思路，以便让小白和没有接触过这类题型的小伙伴们能读懂。第一题，nani1、打开网页啥都没有，内容一片空白啥。这时候我们应该按F12去查看网页源码。往往很…...
东莞建网站公司排名/百度推广登录入口官网网址
为什么80%的码农都做不了架构师？>>> 去下载一些东西 老样子，先废话几句，IntelliJ IDEA，发音大致如此：[in te li dʒei ai di: i: ei]，我还是简称之为IntelliJ吧，“Intel”有“智能”…...
网站建设收费情况/企业品牌推广
Qemu-kvm、kvm、 virt-manager、VNC Qemu-kvm创建和管理虚拟机 一.KVM简介 KVM（名称来自英语：Kernel-basedVirtual Machine的缩写，即基于内核的虚拟机），是一种用于Linux内核中的虚拟化基础设施，可以将Linux…...
做网站设计需要多久/理发美发培训学校
女孩倒在秋千上，男孩用力地推啊推啊。 男孩篮球比赛，女孩叫破了嗓子，第二天依然出现在男孩面前说昨天你真逊。 女孩说我要最漂亮的那朵，男孩奋不顾身地爬上树，然后遍体鳞伤地对女孩说给你。 男孩的头上出…...
生物商城网站建设/5月新冠病毒最新消息
https://chengkehan.github.io/Anisotropic.html 转载于:https://www.cnblogs.com/jim-game-dev/p/5744556.html...
wordpress自定义站点/南宁百度seo软件
Cannot read property xxx of undefined 这个错误很好理解,就是使用.xxx的那个对象为undefined,类似的报错还有Cannot read property xxx of null看个例子try{var bundefined;var c b.length;}catch(err){console.log(err.stack);}b定义为undefined,再使用b.length就会报这个错…...