M
U
S
I
- css布局2025-12-28 2:30:14
锚点定位布局
CSS 锚点定位 (CSS Anchor Positioning) 学习指南 CSS 锚点定位是一项新兴的 Web 标准，旨在解决无需 JavaScript 即可将一个元素（如提示框、菜单）相对于另一个元素（锚点）进行精确布局的难题。 可以使用 [OddBird](https://www.oddbird.net/) 团队为 CSS 锚点定位提供的 Polyfill （[CSS Anchor Positioning Polyfill](https://anchor-polyfill.netlify.app/)） - css动画与过渡2025-12-28 2:8:29
03-02 逐帧动画
核心原理 逐帧动画是将一连串的连续动作的静态图片，合并成一张雪碧图，通过 CSS 改变背景图的位置（background-position），让画面从一帧跳动到下一帧 使用animation-timing-function的step()函数实现，它会将动画周期分割成 n 个等距的断点： - ailangchain2025-12-28 2:4:14
00-01-web用例集合
环境安装 shell npm i @langchain/core - css动画与过渡2025-12-12 9:57:15
03-10 液态玻璃效果
一、 核心原理 实现这种“液态玻璃”效果的核心在于将CSS 的磨砂玻璃 (Glassmorphism)与SVG 的滤镜扭曲 (Filter Distortion)相结合。 整个效果可以拆解为三个视觉层级： - css动画与过渡2025-12-10 6:8:17
03-09 描边动画
核心原理 描边动画（Line Drawing Animation）能产生一种图案正在被“画”出来的神奇效果。 虽然它依赖 SVG，但动画的控制完全由 CSS 完成。核心基于两个 SVG 属性： - css动画与过渡2025-12-10 5:18:41
03-08 骨架屏效果
核心原理 骨架屏（Skeleton Screen）是在数据加载完成前，展示给用户的一个灰色占位轮廓。为了让它看起来是“加载中”的状态，通常会加上一个扫光动画（Shimmer Effect）。 这个动画的核心系统是： - css动画与过渡2025-12-10 4:47:8
03-06 3D翻转卡片
核心原理 3D 翻转卡片是 CSS 3D 变换中最经典的应用场景。它并不是单一属性的功劳，而是需要构建一个完整的3D 空间体系。 需要三个关键步骤（对应三个层级的元素）： - css动画与过渡2025-12-09 10:5:49
03-05 沿圆形路径移动动画
父容器旋转，子元素反向旋转 1. 直接绕着一个圆的中心旋转（但内容自身也会旋转，这样会影响可读性） 2. 为了让自身不旋转，在外面再套一层div，div自身环绕大圆选装，元素自身反向旋转，用内层的变形来抵消外层的变形效果 - css动画与过渡2025-12-09 6:44:56
03-04 打字动画
效果描述 打字动画模拟真实打字过程，文字逐个字符显现，通常伴随闪烁的光标 :::dom - css动画与过渡2025-12-09 3:36:41
03-03 呼吸&摆钟效果
animation-direction | 值 | 描述 | | :-----------------: | :--------------------------------------: | - css动画与过渡2025-12-08 10:40:11
01-01 CSS 动画
@keyframes 和 animation 1. @keyframes css - css动画与过渡2025-12-08 2:13:13
02-01 view transition
简介 :::demo vue - css动画与过渡2025-12-08 2:13:13
03-01 缓动效果
效果描述 模拟了橡皮筋或弹簧释放后的物理运动 -运动过程：动画对象会快速移动向目标值，并冲过（Overshoot）目标点，然后反弹回来，经过几次逐渐减弱的震荡，最终停在目标位置。 - css基础2025-12-07 5:47:21
12-03 object-view-box
简介 object-view-box属性为元素指定了一个视窗框（View Box），这个视窗框有点类似于<svg>元素的viewBox属性，可以对元素的内容进行缩放或平移 可使用元素 - css基础2025-12-07 5:44:51
12-01 clip-path
clip-path使得元素按照特定的区域显示内容，即被裁剪区域内（图形内）可视，被裁剪区域外（图形外）不可见（被隐藏） 坐标系统 左上角为(0, 0)原点，向右为 x 轴正方向，向下为 y 轴方向 - css基础2025-11-20 5:44:44
13-02 backdrop-filter
毛玻璃效果 通过 filter 实现 :::demo - css基础2025-11-20 11:2:35
13-01 filter
模糊：blur() 设置高斯模糊效果 "radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； - htmlwebapi2025-11-19 3:54:11
02-01 Svg
svg SVG 中有一空间概念，它可分为viewport和viewBox两个部分，可以把viewport比作一个相框，而viewBox比作相片 其中viewport的大小就是相框的大小，也就是眼睛看得到的范围，不管相片有多大，所能看到的就是相框范围内的大小，而viewBox则是这张照片的大小 - css基础2025-11-17 9:50:6
12-02 mask
📋 介绍 可以使用图像、渐变或SVG来控制元素的可见性。 核心原理：遮罩中的透明部分会让元素对应区域变得透明，不透明部分保持元素可见。 - css基础2025-11-16 11:44:6
05-08 锥形渐变
基本语法 css conic-gradient([从哪个角度开始] at [中心点位置], 颜色节点1 [角度], 颜色节点2 [角度], ...) - css基础2025-11-16 6:51:17
05-07 径向渐变
基本语法 css radial-gradient([形状] [尺寸] at [位置], 颜色节点1 [位置], 颜色节点2 [位置], ...) - css基础2025-11-13 12:3:42
05-06 线性渐变
基本语法 css linear-gradient([方向], 颜色节点1 [位置], 颜色节点2 [位置], ...) - css基础2025-11-12 11:58:1
01-03 媒体查询
markmap CSS媒体查询 (CSS Media Queries) 语法规则 - css基础2025-11-12 11:44:59
01-02 At规则
> 参考文档：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_syntax/At-rule) 总览 | 规则 | 作用 | - aimcp2025-11-12 11:41:23
MCP Client nodejs
markmap - MCP 客户端 - 环境搭建 - aimcp2025-11-12 11:27:0
MCP Server TS
STDIO —— node 执行 js 脚本启动服务器 1. 创建项目 shell - aimcp2025-11-12 11:26:51
MCP Server Python
环境初始化 > 最新请查看 [官网](https://mcp-docs.cn/quickstart/server%E7%B3%BB%E7%BB%9F%E8%A6%81%E6%B1%82) 系统要求 - aimcp2025-11-12 11:13:33
01-简介
[MCP](https://mcp-docs.cn/introduction) 是什么？ MCP全称为模型上下文协议，是统一不同大语言模型（LLM）与外部工具之间的集成的标准协议 一、工具是什么？ - css基础2025-10-22 9:58:3
11-01 固定宽高比
垂直内距（padding-top 或 padding-bottom） 1. 将高度设置为 0 2. 将padding-top或padding-bottom属性的值设置为百分比的值 - css基础2025-10-22 4:49:52
08-02 @property
> 允许 Web 开发者显式地定义他们的 CSS 自定义属性，而且允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承 语法 属性
木厶 | kingmusi
类型归档
web
html
css
javascript
node
jquery
typescript
vue
react
echarts
electron
前端工程化
java
elastic
mysql
python
flutter
git
算法
部署
图形学
ai