feat(镂空效果): 感谢Cursor，550C太快了
This commit is contained in:
HeXiaoLong:Suanier
parent
278ea57617
commit
7785a99f99
BIN
test/background-test.jpg
Normal file
BIN
test/background-test.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
224
test/镂空遮罩.html
Normal file
224
test/镂空遮罩.html
Normal file
@ -0,0 +1,224 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Video Background with Transparent Text Mask</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
background-image: url('./background-test.jpg');
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SVG文字样式 */
|
||||||
|
.overlay text {
|
||||||
|
font-family: "华文行楷", sans-serif;
|
||||||
|
font-size: 15rem;
|
||||||
|
font-weight: bold;
|
||||||
|
/* font-style: italic; */
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
fill: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 遮罩背景样式 */
|
||||||
|
.overlay .mask-bg {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 遮罩层样式 */
|
||||||
|
.overlay .overlay-bg {
|
||||||
|
fill: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="overlay">
|
||||||
|
<svg>
|
||||||
|
<defs>
|
||||||
|
<mask id="textMask">
|
||||||
|
<rect class="mask-bg" width="100%" height="100%"/>
|
||||||
|
<text
|
||||||
|
x="50%"
|
||||||
|
y="50%"
|
||||||
|
text-anchor="middle"
|
||||||
|
dominant-baseline="middle"
|
||||||
|
>星撰玉衡</text>
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
<rect class="overlay-bg" width="100%" height="100%" mask="url(#textMask)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
const a = `
|
||||||
|
让我详细解释一下SVG mask的工作原理：
|
||||||
|
|
||||||
|
1. **SVG Mask的基本原理**：
|
||||||
|
- SVG的mask（遮罩）是一个灰度蒙版
|
||||||
|
- 在mask中：
|
||||||
|
- 白色（1.0）表示完全显示
|
||||||
|
- 黑色（0.0）表示完全隐藏
|
||||||
|
- 灰色（0-1之间）表示部分显示
|
||||||
|
|
||||||
|
2. **当前代码的具体工作流程**：
|
||||||
|
```html
|
||||||
|
<mask id="textMask">
|
||||||
|
<!-- 白色背景，表示整个区域都会显示遮罩层 -->
|
||||||
|
<rect width="100%" height="100%" fill="white"/>
|
||||||
|
|
||||||
|
<!-- 黑色文字，表示文字区域会隐藏遮罩层 -->
|
||||||
|
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="black" font-size="15rem" font-weight="bold">HELLO</text>
|
||||||
|
</mask>
|
||||||
|
|
||||||
|
<!--应用遮罩的矩形 -->
|
||||||
|
<rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.3)" mask="url(#textMask)" />
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **渲染过程**：
|
||||||
|
- 首先，mask中的白色背景（`fill = "white"`）表示整个区域都会显示遮罩层
|
||||||
|
- 然后，mask中的黑色文字（`fill = "black"`）会"挖出"文字形状的区域，使这部分完全透明
|
||||||
|
- 最后，这个mask被应用到一个半透明黑色背景上（`fill = "rgba(0, 0, 0, 0.3)"`）
|
||||||
|
|
||||||
|
4. **最终效果**：
|
||||||
|
- 文字区域（mask中的黑色部分）：
|
||||||
|
- 遮罩层完全隐藏
|
||||||
|
- 直接显示背景图片
|
||||||
|
- 其他区域（mask中的白色部分）：
|
||||||
|
- 显示半透明黑色遮罩层
|
||||||
|
- 背景图片被遮罩层覆盖
|
||||||
|
|
||||||
|
5. **为什么这样设计**：
|
||||||
|
- 使用mask而不是直接设置透明度，可以更精确地控制显示区域
|
||||||
|
- 文字区域完全透明，保证了背景图片的清晰显示
|
||||||
|
- 周围区域保持半透明黑色，提供了良好的对比度
|
||||||
|
|
||||||
|
这种实现方式的优点是：
|
||||||
|
- 精确控制：可以精确控制哪些区域显示遮罩，哪些区域透明
|
||||||
|
- 性能好：不需要重复加载背景图片
|
||||||
|
- 灵活性：可以轻松调整遮罩的透明度
|
||||||
|
- 可维护性：SVG结构清晰，易于修改和维护
|
||||||
|
|
||||||
|
需要我解释得更详细或者有其他问题吗？
|
||||||
|
`
|
||||||
|
|
||||||
|
|
||||||
|
const b = `
|
||||||
|
好的，让我详细解释一下SVG中各个标签的含义：
|
||||||
|
|
||||||
|
1. **`<svg>` 标签**：
|
||||||
|
- SVG的根元素
|
||||||
|
- 定义了一个SVG文档片段
|
||||||
|
- 可以设置宽高、视口等属性
|
||||||
|
|
||||||
|
2. **`<defs>` 标签**：
|
||||||
|
- 用于定义可重用的SVG元素
|
||||||
|
- 这里用来定义mask，使其可以在其他地方引用
|
||||||
|
- 相当于一个"定义区域"，里面的元素不会直接显示
|
||||||
|
|
||||||
|
3. **`<mask>` 标签**：
|
||||||
|
- 定义一个遮罩效果
|
||||||
|
- `id="textMask"` 给遮罩一个唯一标识符，方便引用
|
||||||
|
- 遮罩中的元素决定了哪些区域显示/隐藏
|
||||||
|
|
||||||
|
4. **`<rect>` 标签**：
|
||||||
|
- 用于绘制矩形
|
||||||
|
- 属性说明：
|
||||||
|
- `width="100%"`：宽度占满容器
|
||||||
|
- `height="100%"`：高度占满容器
|
||||||
|
- `fill="white"`：填充颜色为白色
|
||||||
|
|
||||||
|
5. **`<text>` 标签**：
|
||||||
|
- 用于绘制文本
|
||||||
|
- 属性说明：
|
||||||
|
- `x="50%"`：文本水平居中
|
||||||
|
- `y="50%"`：文本垂直居中
|
||||||
|
- `text-anchor="middle"`：文本水平对齐方式为居中
|
||||||
|
- `dominant-baseline="middle"`：文本垂直对齐方式为居中
|
||||||
|
- `font-size="15rem"`：字体大小
|
||||||
|
- `font-weight="bold"`：字体粗细
|
||||||
|
- `fill="black"`：文本颜色
|
||||||
|
|
||||||
|
6. **应用遮罩的 `<rect>`**：
|
||||||
|
- 这是实际显示的矩形
|
||||||
|
- `fill="rgba(0, 0, 0, 0.3)"`：半透明黑色
|
||||||
|
- `mask="url(#textMask)"`：引用之前定义的遮罩
|
||||||
|
|
||||||
|
完整的SVG结构：
|
||||||
|
```html
|
||||||
|
<svg>
|
||||||
|
<!-- 定义区域 -->
|
||||||
|
<defs>
|
||||||
|
<!-- 定义遮罩 -->
|
||||||
|
<mask id="textMask">
|
||||||
|
<!-- 遮罩背景 -->
|
||||||
|
<rect width="100%" height="100%" fill="white"/>
|
||||||
|
<!-- 遮罩文字 -->
|
||||||
|
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="black" font-size="15rem" font-weight="bold">HELLO</text>
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
<!-- 实际显示的矩形（应用遮罩） -->
|
||||||
|
<rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.3)" mask="url(#textMask)"/>
|
||||||
|
</svg>
|
||||||
|
```
|
||||||
|
|
||||||
|
SVG的一些重要特性：
|
||||||
|
1. **坐标系统**：
|
||||||
|
- 左上角为(0,0)点
|
||||||
|
- x轴向右增加
|
||||||
|
- y轴向下增加
|
||||||
|
|
||||||
|
2. **单位**：
|
||||||
|
- 可以使用像素(px)
|
||||||
|
- 可以使用百分比(%)
|
||||||
|
- 可以使用相对单位(rem, em)
|
||||||
|
|
||||||
|
3. **定位方式**：
|
||||||
|
- 可以使用绝对定位（具体数值）
|
||||||
|
- 可以使用相对定位（百分比）
|
||||||
|
- 可以使用居中定位（50% + text-anchor）
|
||||||
|
|
||||||
|
4. **颜色表示**：
|
||||||
|
- 可以使用颜色名称（如white, black）
|
||||||
|
- 可以使用RGB值（如rgb(255,255,255)）
|
||||||
|
- 可以使用RGBA值（如rgba(0,0,0,0.3)）
|
||||||
|
- 可以使用十六进制（如#FFFFFF）
|
||||||
|
|
||||||
|
需要我详细解释某个具体的标签或属性吗？
|
||||||
|
`
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user