纹理蒙版文本 - HyperFrames

text texture mask effect

砖

岩石

地面103

地面

木头

金属

岩浆

安装

npx hyperframes add texture-mask-text

细节

财产	价值
类型	成分

代理使用

当要求代理应用纹理时，请使用以下措辞：

Use the Texture Mask Text catalog component.

1. From the project root, run:
   npx hyperframes add texture-mask-text
2. That command creates this installed snippet:
   compositions/components/texture-mask-text/texture-mask-text.html
3. Open that file and paste the real <style> block
   near the bottom into the composition once. That CSS defines
   hf-texture-text and every hf-texture-* class.
4. Apply this class to the target text:
   class="hf-texture-text hf-texture-brick"
5. For another material, copy one hf-texture-* class
   from the Texture Examples cards.
6. This is the proper way to apply drop shadow
   to textured text: wrap the text and put
   filter on the wrapper, not on the text.
   Use this markup:
   <div style="filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.48))">
     <div class="hf-texture-text hf-texture-brick">TEXT</div>
   </div>

安装后，该代码段位于您运行 npx hyperframes add texture-mask-text 的项目内的 compositions/components/texture-mask-text/texture-mask-text.html 处。要粘贴的部分是该文件底部附近的真实 <style> 元素；纹理 PNG 安装到 assets/texture-mask-text/masks/ 并由该 CSS 中的项目根 URL 引用。将 hf-texture-brick 替换为下面任何纹理卡上显示的类。基类 hf-texture-text 始终是必需的。

动画纹理

通过移动文本元素上的蒙版位置来对纹理进行动画处理。将阴影保留在包装纸上，以便阴影跟随纹理轮廓。

动画蒙版位置

hf-纹理-文本 hf-纹理-熔岩

运动

<div class="texture-shadow">
  <div class="hf-texture-text hf-texture-lava animated-texture">MOTION</div>
</div>

.animated-texture {
  --mask-size: 180% 180%;
  --mask-position: 0% 50%;
}

const tl = gsap.timeline({ paused: true });
tl.to(".animated-texture", {
  "--mask-position": "100% 50%",
  duration: 1.2,
  ease: "sine.inOut",
  yoyo: true,
  repeat: 1,
}, 0);
window.__timelines["my-composition"] = tl;

纹理示例

石工

砖

高频纹理砖

砖

使用 hf 纹理文本 hf 纹理砖

砖块104

高频纹理砖-104

砖

使用 hf-纹理-文本 hf-纹理-砖-104

砖块102

高频纹理砖-102

砖

使用 hf-纹理-文本 hf-纹理-砖-102

积木101

高频纹理砖-101

砖

使用 hf-texture-text hf-texture-bricks-101

砖块 075 A

高频纹理砖-075-a

砖

使用 hf-纹理-文本 hf-纹理-砖-075-a

具体的

高频纹理混凝土

具体的

使用 hf-纹理-文本 hf-纹理-混凝土

混凝土034

HF-纹理-混凝土-034

具体的

使用 hf-纹理-文本 hf-纹理-混凝土-034

混凝土 047 A

高频纹理混凝土-047-a

具体的

使用 hf-纹理-文本 hf-纹理-混凝土-047-a

混凝土046

HF-纹理-混凝土-046

具体的

使用 hf-纹理-文本 hf-纹理-混凝土-046

混凝土042A

hf-纹理-混凝土-042-a

具体的

使用 hf-纹理-文本 hf-纹理-混凝土-042-a

石膏001

高频纹理石膏-001

石膏

使用 hf-纹理-文本 hf-纹理-石膏-001

彩绘石膏017

HF-纹理-绘制-石膏-017

石膏

使用 hf-纹理-文本 hf-纹理-绘制-石膏-017

石头

岩石

高频纹理岩石

岩石

使用 hf-纹理-文本 hf-纹理-岩石

摇滚063

高频纹理岩石-063

岩石

使用 hf-纹理-文本 hf-纹理-岩石-063

摇滚058

高频纹理岩石-058

岩石

使用 hf-纹理-文本 hf-纹理-岩石-058

玛瑙

高频纹理缟玛瑙

奥尼克斯

使用 hf 纹理文本 hf 纹理缟玛瑙

大理石012

HF-纹理-大理石-012

大理石

使用 hf-纹理-文本 hf-纹理-大理石-012

大理石016

HF-纹理-大理石-016

大理石

使用 hf-纹理-文本 hf-纹理-大理石-016

洞石009

高频纹理石灰华-009

石头

使用 hf-纹理-文本 hf-纹理-石灰华-009

铺路石 150

高频纹理铺路石-150

石头

使用 hf-纹理-文本 hf-纹理-铺路石-150

铺路石 138

高频纹理铺路石 138

石头

使用 hf-纹理-文本 hf-纹理-铺路石-138

瓷砖 138

hf-纹理-瓷砖-138

瓦

使用 hf-纹理-文本 hf-纹理-瓷砖-138

地面/道路

地面103

高频纹理地面-103

地面

使用 hf-纹理-文本 hf-纹理-地面-103

地面037

高频纹理地面-037

地面

使用 hf-纹理-文本 hf-纹理-地面-037

地面054

高频纹理地面-054

地面

使用 hf-纹理-文本 hf-纹理-地面-054

地面104

高频纹理地面-104

地面

使用 hf-纹理-文本 hf-纹理-地面-104

地面068

高频纹理地面-068

地面

使用 hf-纹理-文本 hf-纹理-地面-068

地面080

高频纹理地面-080

地面

使用 hf-纹理-文本 hf-纹理-地面-080

012A路

高频纹理路-012-a

路

使用 hf-纹理-文本 hf-纹理-路-012-a

008A路

高频纹理路-008-a

路

使用 hf-纹理-文本 hf-纹理-路-008-a

007号公路

高频纹理路-007

路

使用 hf-纹理-文本 hf-纹理-路-007

013A路

高频纹理路-013-a

路

使用 hf-纹理-文本 hf-纹理-路-013-a

012B路

高频纹理路-012-b

路

使用 hf-纹理-文本 hf-纹理-路-012-b

009C路

高频纹理路-009-c

路

使用 hf-纹理-文本 hf-纹理-路-009-c

沥青031

HF-纹理-沥青-031

沥青

使用 hf-纹理-文本 hf-纹理-沥青-031

木头

高频纹理木材

木头

使用 hf 纹理文本 hf 纹理木材

木094

高频纹理木材-094

木头

使用 hf-纹理-文本 hf-纹理-木材-094

木材092

高频纹理木材-092

木头

使用 hf-纹理-文本 hf-纹理-木材-092

木头051

高频纹理木材-051

木头

使用 hf-纹理-文本 hf-纹理-木材-051

木头066

高频纹理木材-066

木头

使用 hf-纹理-文本 hf-纹理-木材-066

木049

高频纹理木材-049

木头

使用 hf-纹理-文本 hf-纹理-木材-049

木058

高频纹理木材-058

木头

使用 hf-纹理-文本 hf-纹理-木材-058

木地板051

高频纹理木地板-051

地面

使用 hf-纹理-文本 hf-纹理-木地板-051

木地板064

高频纹理木地板-064

地面

使用 hf-纹理-文本 hf-纹理-木地板-064

木地板070

高频纹理木地板-070

地面

使用 hf-纹理-文本 hf-纹理-木地板-070

树皮014

高频纹理树皮-014

吠

使用 hf-纹理-文本 hf-纹理-树皮-014

金属

高频纹理金属

金属

使用 hf-纹理-文本 hf-纹理-金属

金属049A

高频纹理金属-049-a

金属

使用 hf-纹理-文本 hf-纹理-金属-049-a

金属055A

高频纹理金属-055-a

金属

使用 hf-纹理-文本 hf-纹理-金属-055-a

金属046B

高频纹理金属-046-b

金属

使用 hf-纹理-文本 hf-纹理-金属-046-b

金属061B

高频纹理金属-061-b

金属

使用 hf-纹理-文本 hf-纹理-金属-061-b

金属048A

高频纹理金属-048-a

金属

使用 hf-纹理-文本 hf-纹理-金属-048-a

金属032

高频纹理金属-032

金属

使用 hf-纹理-文本 hf-纹理-金属-032

金属041A

高频纹理金属-041-a

金属

使用 hf-纹理-文本 hf-纹理-金属-041-a

金属038

高频纹理金属-038

金属

使用 hf-纹理-文本 hf-纹理-金属-038

钻石板009

高频纹理金刚石板-009

盘子

使用 hf-纹理-文本 hf-纹理-钻石-板-009

有机/软

岩浆

高频纹理熔岩

岩浆

使用 hf-纹理-文本 hf-纹理-熔岩

草005

HF-纹理-草-005

草

使用 hf-纹理-文本 hf-纹理-草-005

草001

hf-纹理-草-001

草

使用 hf-纹理-文本 hf-纹理-草-001

草004

HF-纹理-草-004

草

使用 hf-纹理-文本 hf-纹理-草-004

地毯

高频纹理地毯

编织

使用 hf-纹理-文本 hf-纹理-地毯

面料083

HF-纹理-织物-083

织物

使用 hf-纹理-文本 hf-纹理-织物-083

雪

高频纹理雪

雪

使用 hf-纹理-文本 hf-纹理-雪

雪015

HF-纹理-雪-015

雪

使用 hf-纹理-文本 hf-纹理-雪-015

皮革037

HF-纹理-皮革-037

皮革

使用 hf-纹理-文本 hf-纹理-皮革-037

面料080

HF-纹理织物-080

织物

使用 hf-纹理-文本 hf-纹理-织物-080

用法

在 npx hyperframes add texture-mask-text 之后，安装的代码片段位于当前 HyperFrames 项目内的 compositions/components/texture-mask-text/texture-mask-text.html 处。打开该文件并将底部附近的真实 <style> 元素粘贴到您的合成中一次；它定义了 hf-texture-text 和上面示例使用的每个 hf-texture-* 类。将安装的纹理 PNG 保存在 assets/texture-mask-text/masks/ 中； CSS 使用项目根 URL 引用它们。

​安装

​细节

​代理使用

​动画纹理

​纹理示例

​石工

​石头

​地面/道路

​木头

​金属

​有机/软

​用法

安装

细节

代理使用

动画纹理

纹理示例

石工

石头

地面/道路

木头

金属

有机/软

用法